javascript - 移动端弹出遮罩层禁止页面滚动,遮罩里面的框允许滚动如何实现。
伊谢尔伦
伊谢尔伦 2017-04-11 11:01:35
[JavaScript讨论组]

尝试的方案:
1.弹出遮罩层之后,给bodyoverflow:hidden但是这样做的话,页面会跑到最顶部去然后划不动。

2.给body加overflow:auto,弹出遮罩层之后,将overflow:auto改成,overflow:hidden,这时候测试是比较完美的,页面不会跑到顶部,也能正常禁止滚动。但是在IOS下,会出现滚动页面迟钝和滚不动的情况。

3.通过js,弹出遮罩层时调用openMask方法,关闭时调用closeMask方法。

    var handler = function () {
        event.preventDefault();
        event.stopPropagation();
    };

    var OpenMask = function(
    {
        document.body.addEventListener('touchmove',handler,false);
        document.body.addEventListener('wheel',handler,false);
    };
    
    var CloseMask = function()
    {
        document.body.removeEventListener('touchmove',handler,false);
        document.body.removeEventListener('wheel',handler,false);
    };

缺点就是下面这种情况里面优惠券的滚动条划不动了额。

有木有遇到的,有什么比较好的解决办法吗。

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(3)
天蓬老师

参考:移动端滚动穿透问题完美解决方案

PHPz

谢邀~

我觉得浮动的p里面的设置overflow: auto就行了,
外面能不能滑动不影响什么吧?
当然除非上层硬性要求.

楼下的答案不错, 我看了一下~

不过其实也可以做成这样, (目前京东的手机端的原弹出框的逻辑操作.)

天蓬老师

https://jsfiddle.net/3qmj6fyu/
迟钝的话应该是这个https://segmentfault.com/a/11...

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号