移动端 滚动穿透

滚动穿透

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

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

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

禁用底层页面滚动

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

弹出层将覆盖整个视口

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

禁用触摸事件

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

监听弹出层滚动位置

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

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

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

overscroll-behavior 控制滚动边界

overscroll-behavior: auto; /* 默认 当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”*/ 
overscroll-behavior: contain; /* 默认的滚动边界行为不变（“触底”效果或者刷新），但是临近的滚动区域不会被滚动链影响到，比如对话框后方的页面不会滚动。 */
overscroll-behavior: none; /* 临近滚动区域不受到滚动链影响，而且默认的滚动到边界的表现也被阻止。 */