面试题： 前端处理滚动穿透这个顽疾

诚如你所知: 滚动穿透是指在移动端滑动页面的过程中，页面滚动受到了触摸事件的干扰，导致无法流畅地滚动，这主要是由于事件冒泡造成的。解决方法如下：

1. 监听 touchmove 事件，阻止默认行为

监听 touchmove 事件，阻止事件的默认行为，防止事件冒泡到父元素上。

2. 禁止滚动

可以通过 overflow 属性禁止滚动。

body {
  overflow: hidden;
}

注意：如果滚动穿透出现在滑动嵌套元素中，则需要修改父元素和子元素的 overflow 属性，将两者都设置为 auto。

以上两种方式都能有效防止滚动穿透，但都会影响正常的滚动效果。因此，可以使用以下方式进行优化：

1. 设置滚动区域

在子元素中添加 css 属性 touch-action: none; 可以避免事件冒泡。