兼容移动端 js弹出框实现微信禁止h5禁止网页下拉，滚动穿透，禁止微信内置浏览器下拉网页

2024年2月21日 133次阅读 来源: 咕鸡咕鸡

//弹出层触发时候页面设置为高度百分百将不能滚动 设置body html的样式为”overflow”: “hidden”,”height”:’100%’
//取消时候把样式重置还原为最初’overflow’: ‘visible’,”height”:’100%’

    $('xxx').click(function(){
        $('弹出层').show();
        $('body, html').css({
            "overflow": "hidden",
            "height":'100%'
        })
    })
    //遮罩层灰色区域点击关闭遮罩层
    $('遮罩层').click(function(e){
        e.stopPropagation();//阻止冒泡默认事件
        $('弹出层').hide();
        $('body, html').css({
            'overflow': 'visible',
            "height":'100%'
        })
    })

//禁止h5页面弹出框弹出时候市面下拉滚动 监听touchmove事件，这样一来整个页面将不能滚动所以添加一个判断 你的大div盒子取消阻止事件就能正常使用了

document.querySelector('body').addEventListener('touchmove', function(e) {
    if (!document.querySelector('你的div盒子').contains(e.target)){
            e.preventDefault();
    }
})
    原文作者：咕鸡咕鸡
    原文地址: https://segmentfault.com/a/1190000018457486
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞