微信打开网页有弹出层内容（带滚动条），弹出层滚动的时候如何阻止body页面的滚动呢？

Question

如题：项目中有弹出层内容，弹出层内容也比较多，带滚动条，body内容同样带滚动条，如何在滚动弹出层内容的时候，防止body也滚动呢？
查过相关方法,一下方法是不可行的：
1.给html,body都加上height:100%.overfloe:hidden!这种方法会造成打开弹出层，body的内容就好返回到顶部，不可行！
2.添加冒泡阻止，亲测，不可行！

下面是我的在线demo:http://1.csys.applinzi.com/
请问应该怎么做？

最后提醒下 浏览器测试很多都可以，但是微信端打开网页都不行的！谢谢！

Answer 1

出现遮罩层给 body 加 modal-open，阻止滚动穿透,取消遮罩层移除 modal-open
js

//出现遮罩层给body 加 modal-open，阻止滚动穿透
var ModalHelper = (function(bodyCls) {
var scrollTop;
return {
    afterOpen: function() {
    scrollTop = document.scrollingElement.scrollTop;
    document.body.classList.add(bodyCls);
    document.body.style.top = -scrollTop + 'px';
    },
    beforeClose: function() {
    document.body.classList.remove(bodyCls);
    // scrollTop lost after set position:fixed, restore it back.
    document.scrollingElement.scrollTop = scrollTop;
    }
};
})('modal-open');

css

body.modal-open {
    position: fixed;
    width: 100%;
}

我项目中都这样用,可以记录滚动位置，

            alertShow: function () {//清除滚动穿透 记住滚动位置
                var body = document.getElementsByTagName("body")[0];
                if (this.alertShow) {
                    scrollTop = document.scrollingElement.scrollTop;
                    document.body.classList.add('modal-open');
                    document.body.style.top = -scrollTop + 'px';
                    body.className = "modal-open";
                } else {
                    document.body.classList.remove('modal-open');
                    document.scrollingElement.scrollTop = scrollTop;
                    body.className = "";
                }
            }

Answer 2

可以参考大师张鑫旭的博客直达链接

Answer 3

弹出时body和html添加css touch-action:none;关闭时touch-action:auto;

Answer 4

手机有点击穿透 ，你搜下怎么防止点击穿透 ，不行你用别人的框架

Answer 5

你可以试试弹出遮罩层的时候设置body,html height:90%,overflow:hidden。

Answer 6

以前在 PC 年代是给弹层后面的蒙层添加一个全屏的 iframe 来避免滚动影响。移动端没尝试过，不过，我们团队曾经讨论过这个问题，我现在刻有两种:

1. 弹层添加 touchstart 事件，并在回调中加 e.preventDefault() 阻止所有的滚动，然后弹窗内的滚动由 js 来实现；

2. 弹窗的时候把 body 的添加个样式：position: fixed;

相对来说，第2种比较容易实现，第1种你可以借用 iscroll 等插件实现弹层滚动。

Answer 7

设备 ios
今天在弄弹出层的滚动时，发现用overflow-y:scroll 弄出来的滚动条，滑动时并不平滑。并且弹层中滚动条滑到底部时，再继续滑动body的滚动条也会动。导致弹层消失时body滚动条位置不对
偶然百度到
-webkit-overflow-scrolling : touch;
把这个属性放到弹层的滚动条中。首先，ios的滚动平滑了，并且意外发现任意滑动弹层中的滚动区域，都不会影响到body的滚动条了。
试试