一、场景

一般来说，在写程序涉及到弹出层的时候，一般都会做防触底处理的。就比如这样的弹出层：

二、问题

一般来说呢，只需要给遮罩层设置 catchtouchmove 即可解决。

但是这样有弊端，假如弹框内容不可滚动，不会有太大问题，

假如当弹出层内容较多，并且可以滚动的时候，问题就会比较严重，

触摸弹出框内没有滚动的区域就会发现，滚动可以穿透，并且传递给底层的列表页面。

下面是我踩过的坑：

因为我的弹出层是三级联动菜单，有滚动列表。所以无法直接设置 catchtouchmove 。

三、解决方案

通过反复研究我们公司的小程序还有网上的商城红包demo：

首先，弹出层与遮罩层通过按钮触发。

然后设置弹出层的样式，并且将遮罩层的样式设置为满屏

width: 100%; 
height: 100%; 
position:fixed;

且遮罩层的z-index要低于弹出层，保证弹出层可以正常展示，不会被遮盖！

最后，将弹出层、遮罩层均设置 catchtouchmove，使其无法触底。再将弹出层内可滚动区域的view修改为scroll-view。

至于希望水平滚动还是垂直滚动，看自己需求设置即可。

至此，大功告成。目前在iOS与安卓系统上进行了简单测试，均未出现触底以及底部列表位置发生改变的情况。

因为苹果手机录屏没有触摸点，成品录下来也看不出效果，所以这个环节就省略了。

四、尾声

好了，本文没有写什么代码，只是分享一个解题思路，希望对大家有用。欢迎大神修正补充，问题探讨也可以私信我。

Ending…