背景 俗话说，产品有三宝：弹窗、浮层加引导，足以见弹窗在产品同学心目中的地位。对任意一个刚入门的前端同学来说，实现一个模态框基本都可以达到信手拈来的地步，但是，当模态框里边的内容滚动起来以后，就会出现各种各样的让人摸不着头脑的问题，其中，最出名的想必就是滚动穿透。 什么是滚动穿透？ 滚动穿透的定义：指我们滑动顶层的弹窗，但效果上却滑动了底层的内容。 具体解决方案分析如下： 改变顶层：从穿透的思路考虑，如果顶层不会穿透过去，那么问题就解决了，所以我们尝试给蒙层加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动态设置[代码]hidden[代码]or[代码]visible[代码]or[代码]auto[代码] 就可以控制整个页面是否可以滚动。 [图片] 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，近期开放。

不论是否是微信小程序，应用程序最常用页面交互通讯方式是UI控件事件绑定与事件响应处理函数，这两者分别处在视图层与逻辑层，从微信小程序来说，它分别视图层page.wxml和逻辑层page.js。而在微信小程序中，最常见的UI控件事件绑定属性是bindtap，当然还有另外一个是catchtap。这两个有什么区别与联系呢？ 联系的是它们两个都是UI控件事件绑定方法，都可以实现视图层与逻辑层之间的用户动作事件交互，不同的是前者bindtap会把事件回调响应往上传递，俗称冒泡，而后者catchtap不会事件回调响应往上传递，仅在当前UI控件处理后即结束，不会向它的父级控件元素传递。 显而易见，这两种方法对应的场景不同。如果在page页面中某控件元素绑定事件后，但其父级控件元素没有绑定事件，此时用bindtap即可；但其父级控件元素有绑定事件的话，仍旧用bindtap，那么此时点击该控件元素时候，本身的事件响应函数与其父级控件元素的事件响应函数都会被调用执行，这是我们不希望看到的现象，此现象称为“事件穿透”。 不妨看看示例代码，将会更好理解这个“事件穿透”问题，如下： 一、page.wxmlParent View Child View  二、page.jsPage({ onParentClick: function() { console.log('Parent is clicked.') }, onChildClick: function() { console.log('Child is clicked.') } }) 此时，我们点击“Child View”时，事件响应函数[代码]onChildClick[代码]和[代码]onParentClick[代码]都会被执行，这不是我们所希望看到的。我们希望看到的是“Child View”区域点击时，仅事件响应函数[代码]onChildClick[代码]被执行，而点击除去“Child View”区域之外的“Parent View”的其他区域时，仅[代码]onParentClick[代码]会被执行。 原文发表于码嗨路书，点击 这里 查看详情，希望文章对您有价值，多谢查阅。