移动端 滚动穿透

滚动穿透

• 当一个固定定位（fixed）或绝对定位（absolute）的弹出层（如模态框）覆盖在页面上时，用户在弹出层上滚动，页面底部的内容也会跟着滚动。
• 滚动穿透问题的主要原因是浏览器在处理触摸事件（如 touchmove）时，会将事件传递给整个页面，而不仅仅是弹出层。当用户在弹出层上滚动时，浏览器会将触摸事件传递给底层页面，导致底层页面的内容也跟着滚动。

弹窗内容滚动到底部后带动底层页面滚动

在弹窗出现时可以直接通过页面滚动条滚动

禁用底层页面滚动

• 当弹出层出现时，通过设置 overflow: hidden 禁用底层页面的滚动。这样，用户在弹出层上滚动时，底层页面将保持不动。

弹出层将覆盖整个视口

• 使用 CSS position: fixed：将弹出层设置为固定定位（position: fixed），并设置其宽度和高度为 100%。这样，弹出层将覆盖整个视口，使用户无法滚动底层页面。

禁用触摸事件

• 当弹出层出现时，通过设置 pointer-events: none 禁用底层页面的触摸事件。
• 这样，用户在弹出层上滚动时，底层页面将不响应触摸操作，从而避免滚动穿透问题，当弹出层消失时去掉 pointer-events: none

监听弹出层滚动位置

• 可以通过监听弹出层的滚动事件（scroll），在滚动到顶部或底部时阻止默认行为 event.preventDefault()

阻止弹出层的滚动事件冒泡

• 在弹出层上添加一个事件监听器，阻止滚动事件（touchmove）的冒泡。这样，当用户在弹出层上滚动时，事件将不会传递到底层页面，从而避免滚动穿透问题。