如何彻底解决微信小程序滚动穿透问题

在开发业务的过程中总会有各种样式的弹窗需求，在弹窗弹起来的时候，底部的内容却可以滚动，刚开始我们使用catchtouchmove解决了，但是在复杂一点的情况下依然会导致滚动穿透，今天分享两个永久解决该问题的方法。

第一种方式：

使用官方的page-meta组件，这里贴下官方文档：微信小程序文档
原理：通过该组件我们可以直接设置Page组件样式，我们给它的wxss样式动态设置overflow为hidden / auto 就可以控制整个页面是否可以滚动。

示例代码：

<page-meta page-style="overflow: {{visible ? 'hidden' : 'auto'}}" />

兼容底部是scroll-view，以及弹窗内是scroll-view都不会穿透影响底部的内容。

第二种方式：

使用微信提供的API动态设置Page页面的样式，该API未在官方文档内展示出来，实测可用：

wx.setPageStyle({
   style: {
     overflow: 'hidden'
   }
})

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

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

需要注意的是支付宝小程序同样有page-meta组件，但是支付宝的page-meta组件设置Page样式overflow: hidden却不会生效，经过与官方该组件的开发同学沟通，了解到是因为支付宝小程序使用的UC内核版本太低，导致给Page（相当于h5的body）设置overflow: hidden无效。

2025年05月19日更新：经过找支付宝官方API的一线API开发同学、产品同学推进，终于将动态设置页面是否可滚动的API封装到2.9.87及以上版本基础库。

支付宝官方在基础库2.9.87开始 已支持动态设置页面是否可滚动的API了：
my.setPageScrollable({
	scrollable: true // true可滚动，false不可滚动
})