微信小程序的页面弹窗过长滚动导致的底层滚动（滚动穿透问题）解决办法

对于微信小程序，弹窗时，如果弹窗内容过长，需要滚动，滚动同时，底部页面跟着滚动，这如何优雅的处理这个问题？

处理1（不推荐）： --添加 position:fixed

弹窗时通过给底部最大的view标签添加position:fixed;，从而达到页面不会跟着弹窗滚动

缺点：在取消了该属性后，页面自动滚动回页面顶部，失败。

 

处理2（不推荐）：--添加 catchtouchmove 事件

给弹窗页面添加一个蒙层，蒙层绑定一个事件 catchtouchmove="preventTouchMove"，对于函数 preventTouchMove则添加一个空函数回调，如下：

JS

缺点：滑动蒙层区域不会滚动，但是滑动弹窗内容时，页面还是会滚动，失败。

 

处理3（不推荐）：--使用 scroll-view 标签

给页面添加 scroll-view 标签，在弹窗时给 scroll-view 标签的 scroll-y 的属性设为 false ，如下

缺点：看起来挺好用的，问题是，当遇到页面内容有 textarea 等原生组件时，页面就错乱了，失败；

 

最终处理4（推荐）：通过样式处理

由看到一句话这么说的：

后来尝试在浏览器调试给 page 加上 overflow：hidden 发现可行，比如弹起的时候给 page 加上 overflow：hidden ，隐藏的时候去掉，但是官方并没有给我们操作 page 的方法。

 

不妨换个思维，对于页面，我们是可以通过标签控制样式的。

如果开始时给 page 添加一个 overflow: hidden 的同时给 page 标签下面添加一个替代 page 的标签的 view 标签，命名为 .page-inner。

对于类 page-inner 添加一个 overflow: auto ，这样，下次进行弹窗时，直接操作 page-inner 的 overflow 就行了；

完美解决如下：

只需要在弹窗时，给 page-inner 添加 overflow:hidden 属性即可，成功；

注意：这将会导致 onPageScroll 失效，如果有页面需要用到 onPageScroll  请在该页面添加一下代码

 

完毕！