微信小程序如何解决滚动穿透导致的页面内容无法滚动问题？

本文共计871个文字，预计阅读时间需要4分钟。

%E2%80%9CMask-Scroll+原码地址+*+蒙层防穿透问题+蒙层穿透就是，当你用fixed布局让蒙层显示的时候，手指滑动屏幕会出现底部内容也滑动的现象.+如图：+当蒙层出现的时候，你滚动屏幕，底部内容也会滚动。“+

Mask-Scroll

> 原码地址 *

蒙层防穿透问题

> 蒙层穿透就是，当你用fixed 布局让蒙层显示的时候， 手指滑动屏幕会出现底部内容也滑动的现象. 如图：

当蒙层出现的时候，你滚动屏幕，底部内容也一起跟着滚动。 这就是蒙层穿透， 也可以叫 '滚动穿透'. 当然出现这种情况， 用户体验当然是不好的了。 所以作为一个有点追求的工程师当然是不允许这种情况的发生了(手动狗头...)

## 解决方案

这种要分情况，

• 当蒙层没有滚动条的时候。
• 当蒙层出现滚动条的时候

1. 当弹窗没有滚动条的时候。

直接监听 catch:touchmove 方法， 然后直接返回就可以了。