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

高璐发布于2019-08-02 14:30 / 1046人阅读

摘要：弹出层触发时候页面设置为高度百分百将不能滚动设置的样式为取消时候把样式重置还原为最初弹出层遮罩层灰色区域点击关闭遮罩层遮罩层阻止冒泡默认事件弹出层禁止页面弹出框弹出时候市面下拉滚动监听事件，这样一来整个页面将不能滚动所以添加一个判断你的大盒

//弹出层触发时候页面设置为高度百分百将不能滚动设置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();
    }
})

GPU云服务器云服务器 php 禁止微信 js弹框禁止滚动禁止访问服务器网页 html禁止穿透

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53845.html

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

摘要：弹出层触发时候页面设置为高度百分百将不能滚动设置的样式为取消时候把样式重置还原为最初弹出层遮罩层灰色区域点击关闭遮罩层遮罩层阻止冒泡默认事件弹出层禁止页面弹出框弹出时候市面下拉滚动监听事件，这样一来整个页面将不能滚动所以添加一个判断你的大盒 //弹出层触发时候页面设置为高度百分百将不能滚动设置body html的样式为overflow: hidden,height:100%//取消时...

robin 2019-08-30 15:56 评论0 收藏0
兼容移动端 js弹出框实现微信禁止h5禁止网页下拉，滚动穿透，禁止微信内置浏览器下拉网页

摘要：弹出层触发时候页面设置为高度百分百将不能滚动设置的样式为取消时候把样式重置还原为最初弹出层遮罩层灰色区域点击关闭遮罩层遮罩层阻止冒泡默认事件弹出层禁止页面弹出框弹出时候市面下拉滚动监听事件，这样一来整个页面将不能滚动所以添加一个判断你的大盒 //弹出层触发时候页面设置为高度百分百将不能滚动设置body html的样式为overflow: hidden,height:100%//取消时...

inapt 2019-08-26 13:35 评论0 收藏0
js实现微信禁止h5网页下拉，禁止微信内置浏览器下拉网页，附：demo

摘要：在微信里面打开的链接页面如果没有经过特殊处理，下拉的话，会出现这样的情况大概就是一个深灰色的背景，还有一个源站的域名。在微信里面打开的链接页面如果没有经过特殊处理，下拉的话，会出现这样的情况：showImg(https://segmentfault.com/img/bV37o1?w=750&h=1334); 大概就是一个深灰色的背景，还有一个源站的域名。本人觉得这个非常丑，并且有时...

whjin 2019-08-26 11:47 评论0 收藏0
H5项目常见问题汇总及解决方案

摘要：解决方案可以解决在手机上点击事件的延迟的模块，事件也是为了解决在的延迟问题显示屏原理及设计方案说明屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由个变为多个，如在同样带下的屏幕上，苹果设备的显示屏中，像素点个变为个。原文链接 - https://github.com/FrontEndRo... H5项目常见问题及注意事项 Meta基础知识： H5页面窗口自动调整到设备...

marser 2019-08-20 14:08 评论0 收藏0