背景

俗话说，产品有三宝：弹窗、浮层加引导，足以见弹窗在产品同学心目中的地位。对任意一个刚入门的前端同学来说，实现一个模态框基本都可以达到信手拈来的地步，但是，当模态框里边的内容滚动起来以后，就会出现各种各样的让人摸不着头脑的问题，其中，最出名的想必就是滚动穿透。

什么是滚动穿透？

滚动穿透的定义：指我们滑动顶层的弹窗，但效果上却滑动了底层的内容。

具体解决方案分析如下：

• 改变顶层：从穿透的思路考虑，如果顶层不会穿透过去，那么问题就解决了，所以我们尝试给蒙层加catchtouchmove，但是发现部分场景无效果，那么就不再赘述了。
• 改变底层：既然是顶层影响了底层，要是底层不会滚动，那就没这个问题了。

如何改变底层解决该问题呢？

不成熟方案：

• 底部页面最外层view设置position: fixed;页面不可滚动，但是这个时候会导致页面回到顶部。
• 滚动时监听滚动距离，弹窗时记录滚动位置，关闭弹窗后使用wx.pageScrollTo回滚到记录的位置。

成熟方案

• 使用page-meta组件，通过该组件我们可以操作Page的style样式，类似于h5里body设置overflow: hidden; 控制页面不可滚动。文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html
• 使用wx.setPageStyle设置overflow: hidden， 也可以实现给Page组件设置样式。）

page-meta组件：

通过该组件我们可以直接操作Page组件 ，我们给它的wxss样式overflow动态设置hiddenorvisibleorauto 就可以控制整个页面是否可以滚动。

wx.setPageStyle方法：

调用这个api，动态设置它为hidden/auto，用于控制页面是否可滚动，主要用于页面组件内使用，比如封装好的弹窗组件，就不用单独写page-meta组件了。。

wx.setPageStyle({
   style: {
     overflow: 'hidden' // ‘auto’
   }
})

老规矩，结尾放代码片段：

https://developers.weixin.qq.com/s/U6ItgQmP7upQ

拓展

支付宝小程序虽然存在page-meta组件，但是由于内核为69版本，给page设置overflow: hidden 也无法控制底部元素不可滚动，目前已联系支付宝的底层开发同学提供API控制页面disableScroll，目前正在封装Appx，近期开放。