微信打開網(wǎng)頁有彈出層內(nèi)容（帶滾動條），彈出層滾動的時候如何阻止body頁面的滾動呢？

如題：項目中有彈出層內(nèi)容，彈出層內(nèi)容也比較多，帶滾動條，body內(nèi)容同樣帶滾動條，如何在滾動彈出層內(nèi)容的時候，防止body也滾動呢？
查過相關(guān)方法,一下方法是不可行的：
1.給html,body都加上height:100%.overfloe:hidden!這種方法會造成打開彈出層，body的內(nèi)容就好返回到頂部，不可行！
2.添加冒泡阻止，親測，不可行！

下面是我的在線demo:http://1.csys.applinzi.com/
請問應(yīng)該怎么做？

最后提醒下瀏覽器測試很多都可以，但是微信端打開網(wǎng)頁都不行的！謝謝！

回答

編輯回答

雅痞

以前在 PC 年代是給彈層后面的蒙層添加一個全屏的 iframe 來避免滾動影響。移動端沒嘗試過，不過，我們團隊曾經(jīng)討論過這個問題，我現(xiàn)在刻有兩種:

彈層添加 touchstart 事件，并在回調(diào)中加 e.preventDefault() 阻止所有的滾動，然后彈窗內(nèi)的滾動由 js 來實現(xiàn)；
彈窗的時候把 body 的添加個樣式：position: fixed;

相對來說，第2種比較容易實現(xiàn)，第1種你可以借用 iscroll 等插件實現(xiàn)彈層滾動。

2017年7月10日 05:33

編輯回答

做不到

你可以試試彈出遮罩層的時候設(shè)置body,html height:90%,overflow:hidden。

2017年5月29日 08:09

編輯回答

茍活

出現(xiàn)遮罩層給 body 加 modal-open，阻止?jié)L動穿透,取消遮罩層移除 modal-open
js

//出現(xiàn)遮罩層給body 加 modal-open，阻止?jié)L動穿透
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 = "";
                }
            }

2018年5月20日 18:55

編輯回答

薔薇花

可以參考大師張鑫旭的博客直達鏈接

2017年9月3日 22:30

編輯回答

情皺

彈出時body和html添加css touch-action:none;關(guān)閉時touch-action:auto;

2017年3月1日 21:21

編輯回答

熟稔

手機有點擊穿透，你搜下怎么防止點擊穿透，不行你用別人的框架

2018年2月12日 03:43

編輯回答

兔囡囡

設(shè)備 ios
今天在弄彈出層的滾動時，發(fā)現(xiàn)用overflow-y:scroll 弄出來的滾動條，滑動時并不平滑。并且彈層中滾動條滑到底部時，再繼續(xù)滑動body的滾動條也會動。導致彈層消失時body滾動條位置不對
偶然百度到
-webkit-overflow-scrolling : touch;
把這個屬性放到彈層的滾動條中。首先，ios的滾動平滑了，并且意外發(fā)現(xiàn)任意滑動彈層中的滾動區(qū)域，都不會影響到body的滾動條了。
試試

2018年8月25日 02:53