如何避免微信小程序滚动时内容穿透问题？

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

Mask-Scroll 原码地址 * 雾层穿透问题 * 雾层穿透就是，当你用fixed布局让雾层显示时，手指滚动屏幕会出现底部内容也跟着滚动的情况。如图：当雾层出现时，你滚动屏幕，底部内容也会滚动。

Mask-Scroll

> 原码地址 *

蒙层防穿透问题

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

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

## 解决方案

这种要分情况，

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

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

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