移动端滚动穿透问题

 

移动端滚动穿透问题 ==> 移动端弹出fixed弹窗的话，在弹窗上滑动会导致下层的页面跟着滚动，这个叫“滚动穿透”

1.在弹出层的touchstart事件中调用preventDefault

1
2
3
4
这种方法不可取，至少有3个缺点：
    1.如果弹出层本身是有滚动（条）的话，将会导致弹出层无法滚动，此时用这种方法无于饮鸩止渴。
    2.一个很常见的场景，点击弹出层，弹出层消失掉，此时也无法触发弹出层的点击回调事。
    3.弹出层内的任何事件都执行不了了。

 

2.弹出层touchmove + preventDefault

1
2
3
4
5
// 1.弹出层里不能有需要滚动的内容
// 2.如大段文字需要固定高度，显示滚动条也会被阻止
modal.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, false);

 

3.设置 html,body{overflow:hidden;}

在PC和移动端都能禁止掉下层的滚动。

 

4.最好的解决方案 ==> 在body元素上设置position: fixed

1
2
3
4
body.modal-open {
    position: fixed;
    width: 100%;
}

如果只是上面的 css，滚动条的位置同样会丢失,所以如果需要保持滚动条的位置需要用 js 保存滚动条位置关闭的时候还原滚动位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var ModalHelper = (function(bodyCls) {
    var scrollTop, doc, reg;
    var bodyClassName = "";
    var bodyEle = document.body;
    return {
        afterOpen: function() {
            doc = document.documentElement.scrollTop ? document.documentElement : bodyEle;
            scrollTop = doc.scrollTop;
 
            if(bodyEle.classList){
                bodyEle.classList.add(bodyCls)
            }else{
                bodyEle.className += " " + bodyCls;
            }
 
            bodyEle.style.top = -scrollTop + 'px';
            bodyClassName = bodyEle.className;
        },
         
        beforeClose: function() {
            if(bodyEle.classList){
                bodyEle.classList.remove(bodyCls)
            }else{
                reg = new RegExp("\\b" + bodyCls + "\\b", "g", "gi");
                if(reg.test(bodyClassName)){
                    bodyClassName = bodyClassName.replace(reg, "");
                    bodyEle.className = bodyClassName;
                }
            }
             
            bodyEle.style.top = "";
            doc.scrollTop = scrollTop;
        }
    };
})('modal-open');

 

5.延伸: document.scrollingElement ==> 新标准浏览器获取和设置 scrollTop

1
console.log(document.scrollingElement.scrollTop);

参考

https://uedsky.com/2016-06/mobile-modal-scroll/

转载自：https://www.cnblogs.com/alantao/p/7921072.html

微信上，禁止上下缩滑：

/*去掉手机滑动默认行为*/
$('body').on('touchmove', function (event) {
    event.preventDefault();
});

判断微信浏览器：

/*微信浏览器特殊处理*/
if(window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger'){
    $('body').addClass('index_body');//添加禁止滚动的样式
}else{
    $('body').removeClass('index_body');//去除禁止滚动的样式
}

document.body.parentNode.style.overflow = “hidden";//隐藏且禁用横向纵向两个滚动条

document.body.parentNode.style.overflow = “auto";//开启横向纵向两个滚动条

document.body.parentNode.style.overflowX = ”hidden“;//隐藏横向滚动条

document.body.parentNode.style.overflowX = ”auto“;//开启横向滚动条

document.body.parentNode.style.overflowY = ”hidden“;//隐藏纵向滚动条

document.body.parentNode.style.overflowY = ”auto“;//开启纵向滚动条