关于小程序自定义弹层禁止页面滚动的多方案详解

【春哥博客技术教程分享】在开发小程序的过程中，如何解决小程序自定义弹层禁止页面滚动，解决滚动穿透问题，春哥团队技术虎子分享如下方案：
方案一：通过小程序自定义组件 scroll-view 实现布局，动态修改 scroll-y 属性

组件及属性介绍： developers.weixin.qq.com/miniprogram…

缺点： 布局局限于 scroll-view 组件， 大部分需求都满足不了

方案二：自定义弹层蒙层或者外层容器添加 catchtouchmove 事件

<view class="mask-box" catchtouchmove="preventTouchMove">
    <!--弹层内容-->
</view>
复制代码

缺点： 弹层滑动不了；适用于自定义弹层不滑动的布局。

方案三：动态添加给最外层元素增加 position:fixed 样式

<view style="{{isMask ? 'position:fixed; top: 0; left: 0;' : ''}}">
  <!--内容区-->
</view>
复制代码

缺点： 当 isMask 为 true 时，页面始终会回到顶部；体验过不了关；

方案四：通过动态修改样式处理 （推荐）

原理： 小程序没提供 API 给我们动态修改 page 样式， 那我们换个思路，最开始给 page 设置overflow: hidden , 最外层布局设置 overflow: auto 但是设置 height 属性时还是有坑。
如下：

• height: 100vh 时，上拉加载、下拉刷新在安卓端失效，ios没问题； 适用于当前页面不需要上拉、下拉刷新

• page 设置 overflow: hidden 时， 安卓端页面整体滑动不了； 适用于底层布局不需要滑动

• page 设置 overflow: visible ， 以上问题均解决 （推荐）

代码如下： wxml:

view class="content {{isMask? 'page-hidden' : ''}}">
复制代码

wxss:

page {
  overflow: visible;
  height: 100%;
}
.group-buying-list{
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.page-hidden{
  overflow: hidden
}
复制代码

如果有更多解决方法或疑问，欢迎在春哥技术源码论坛留言、交流！！