移动端滚动穿透问题是怎么造成的？如何避免？

5 min read

移动端滚动穿透是指当一个弹窗或浮层等浮动元素出现时，用户在该元素上下滚动时，下面的页面内容同步滚动，导致用户看到了页面底部的内容。这是因为移动端的 touch 事件本质上是在页面上触发的，而不是在元素之上触发，因此页面内容会随着手指的上下滑动而滚动。

解决方案主要有以下几种：

  1. CSS 解决方案：使用 position: fixed; 属性和 overflow: hidden; 属性。例如：
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

这种解决方案可以在滚动时阻止下面的元素滚动，但是会使弹窗本身的内容因为被固定位置而无法滚动。

  1. JS 解决方案：在弹窗显示时，动态添加 CSS class 实现 body 设置 overflow: hidden; 属性，禁止滚动，弹窗关闭时，动态删除对应的 CSS class，恢复 body 的滚动。例如：
.modal-open {
    overflow: hidden;
}

.modal-close {
    overflow: auto;
}
  1. 自定义事件监听解决方案：可以在弹窗上监听 touch 事件，阻止默认滚动事件并停止事件冒泡。
$('.modal').on('touchmove', function(event) {
    event.preventDefault();
    event.stopPropagation();
});

以上三种方法都可以有效解决移动端滚动穿透的问题，可以根据具体情况自行选择使用。