滚动事件的穿透

今天要说的是一个小程序踩坑的事 —— 触摸滚动事件的穿透，相信很多用过模态（Modal）弹窗之类的同学都知道，一般会让底部的内容不可操作；而我遇到的问题是底部的内容是可滚动的，而出现的弹窗也是可滚动的，但是，当你在弹窗中滚动到尽头，再次继续滚动，滚动事件就会穿透到 modal 下面的内容，让内容滚动，这种情况下如何解决滚动事件的穿透呢？

接下来上代码，为了保护公司权益，这里使用自己写的一个简单demo，能达到测试目的就好：


<!-- 为了更容易看到效果，这里复制了60行 -->
<block wx:for="{{60}}" wx:key='1'>
  <view>我是内容</view>
</block>
 
<!-- 下面是模态窗口 -->
<view style='position:fixed;top:0;left:0;bottom:0;right:0;background-color:rgba(0,0,0,.6);'>
  <view style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80vw;height:50vh;background-color:#fff;overflow:scroll;'>
 
    <block wx:for='{{30}}' wx:key='1'>
      <view>我是模态</view>
    </block>
 
  </view>

image

上图中模态窗口已经滚动到底部，继续滚动时，发生滚动穿透，触发了底下的内容滚动。

如何解决? 这种事件穿透其实就是滚动事件冒泡了，触发了page 的滚动事件，而我们的内容是直接写在 page 内的，这里的 page 是小程序每个页面都会默认存在的最外层标签，就和 H5 中的 html 标签一样，就算不谢html 标签，渲染后，你还是会看到你的内容包含在 html 标签内。从这可以显而易见的知道，包裹内容部分的容器 page 触发了滚动事件，我们的内容当然也就开始滚动了。

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: &quot;Courier New&quot; !important; font-size: 12px !important;">
　　<view wx:if="{{selectMenu}}" catchtap="selectCancle" catchtouchmove='true' class="select-mask {{!!selectMenu?'select-in':'select-out'}}">
      <view class="select-menu">
        <view class="select-list">
          <scroll-view scroll-y="true" style="height: {{selectOptions.length > 5?'500rpx':selectOptions.length*100 + 'rpx'}};">
            <view wx:for="{{selectOptions}}" wx:key="index" data-id="{{item.id}}" data-name="{{item.name}}" catchtap="selectItem" class="select-item">{{item.name}}</view>
          </scroll-view>
        </view>
        <view catchtap="selectCancle" class="select-cancle">
          <text>取消</text>
        </view>
      </view>
    </view></pre>

简单小程序自身提供了相应的方法：

catchtap：和bindtap相对应，catchtap有着阻止事件冒泡的作用；
catchtouchmove：阻止浮层欢动穿透到页面上，这里用到了scroll-view就顺带提一下，这是小程序组件视图容器，表示可滚动视图区域。