页面滚动穿透问题

在开发移动端项目时，遇到了页面滚动穿透的问题：
在一个可以滚动的页面中打开一个具有遮罩层的弹框，底部的页面应该是能够滚动的。但是当我滑动遮罩层时，底部的页面居然滚动了。
在网上查找了一下解决的方案，还是挺多的，有一些经过我测试感觉效果不是很理想；
个人感觉效果比较好还是通过阻止弹窗的touchmove默认事件禁用滚动
实现代码：
dom.addEventListener('touchmove', function(e) {
      e.preventDefault();
    }, false);
但是他有一个缺点就是：弹窗中里不能有其它需要滚动的内容。




恩！这边我再加修改一下，发现在chrome中会出现一个警告
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

恩，大家可以看下这一片文章Making touch scrolling fast by default差不多讲的就是：由于浏览器必须要在执行事件处理函数之后，才能知道有没有掉用过 preventDefault() ，这就导致了浏览器不能及时响应滚动，略有延迟。
所以为了让页面滚动的效果如丝般顺滑，从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动了。

所以这样子就导致了：如果在以上这 3 个元素的 touchstart 和 touchmove 事件处理函数中调用 e.preventDefault() ，会被浏览器忽略掉，并不会阻止默认行为。
那么如何解决这个问题呢？不让控制台提示，而且 preventDefault() 有效果呢？
两个方案：

1、注册处理函数时，用如下方式，明确声明为不是被动的
window.addEventListener('touchmove', func, { passive: false })


2、应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发。
touch-action 还有很多选项，详细请参考touch-action

[注]未来可能所有的元素的 touchstart touchmove 事件处理函数都会默认为 passive: true



还有一点，对remove事件有要求时，把操作封装成一个单独的方法，调用时引用同一个方法，listener才能准确找到。如果直接写在参数里，会认为是两个function(e)是不同的操作，所以不能remove成功。

 

转载于:https://www.cnblogs.com/zhujiasheng/p/7257118.html