背景

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

那么，什么是滚动穿透呢？滚动穿透即：移动端弹出fixed弹窗的话，在弹窗上滑动会导致下层的页面跟着滚动，这个叫 “滚动穿透”。了解了什么是滚动穿 透以及它出现的场景，那么，接下来就直接进入正题。

那我们如何解决该问题呢？

• 页面最外层view设置position: fixed;页面不可滚动，但是这个时候会导致页面回到顶部（不推荐）。
• 滚动时监听滚动距离，弹窗时记录滚动位置，关闭弹窗后使用wx.pageScrollTo回滚到记录的位置（不推荐，比较消耗性能）。
• 使用page-meta组件，通过该组件我们可以操作Page的style样式，类似于h5里body设置overlow: hidden; 控制页面不可滚动。文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html （推荐，官方组件，比较好用）
• 使用wx.setPageStyle设置overflow: hidden; 也可以实现给Page组件设置样式。（次要推荐，调用方式简单，但由于官方未对外透出该API，存在下架风险）

page-meta组件：

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

示例代码：

<page-meta page-style="overflow: {{visible ? 'hidden' : 'visible'}}" />
<button class="button" bindtap="handleClick">点我弹出弹窗</button>
<!-- 模拟页面滚动 -->
<view wx:for="{{300}}" wx:key="index">{{item}}</view>
<!-- 模拟弹窗 -->
<view class="dialog-wrap {{visible ? 'active' : ''}}">
  <view class="dialog-back {{visible ? 'active' : ''}}"></view>
  <view class="share-box-container {{visible ? 'active' : ''}}">
    <view class="share-content">
      <!-- 模拟弹窗内容滚动 -->
      <view class="share-box" wx:for="{{300}}" wx:key="index">{{item}}</view>
    </view>
  </view>
</view>

控制弹窗显隐藏：

const app = getApp()

Page({
  data: {
    visible: false
  },
  onLoad() {
   
  },
  handleClick() {
    this.setData({
      visible: !this.data.visible
    })
  }
})

wxss弹窗样式太多，这里就不贴，放代码片段里了。

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

wx.setPageStyle方法：

调用这个api，动态设置它为hidden/visible，用于控制页面是否可滚动

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

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

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