兼容挪动端 js弹出框完成微信制止h5制止网页下拉，转动穿透，制止微信内置浏览器下拉网页

2024年4月23日 147次阅读 来源: 咕鸡咕鸡

//弹出层触发时刻页面设置为高度百分百将不能转动 设置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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞