支付宝小程序modal弹窗——滚动穿透与滚动溢出

滚动穿透

问题描述：

在移动端开发模态框时（小程序也会出现），当模态框下的页面超过一屏时，在fixed定位的弹窗遮罩层上进行滑动，它下面的内容也会跟着一起滑动，看起来好像事件穿透到了下面的DOM元素一样，我们类比点击穿透，姑且称他为滚动穿透。

问题原因：

通过事件的表象，可以推测是文档的滚动事件被触发了，那我们就禁用滚动事件就好办了。

案例伪代码：

解决方案✅ e.preventDefault()

小程序——脚本语法，通过e.preventDefault()阻止元素的touch–move事件。（H5同理，监听touch–move事件，阻止其touch–move事件）

<view 
 class="modal-wrapper"
 @touch-move="test.disableScrollEvent"&gt;
  <view class="mask"&gt;</view&gt;
  <view class="modal-content"&gt;</view&gt;
</view&gt;
// 外部导入sjs文件
<script lang="sjs" module="test" src="./test.sjs"></script>

// test.sjs
export default {
    disableScrollEvent: (event) => {
        event.preventDefault()
    }
}

解决方案B✅ （touch–action）

默认情况下，平移（滚动）和缩放手势由浏览器专门处理，但是可以通过 CSS 特性 touch–action 来改变触摸手势的行为。摘取几个 touch–action 的值如下。

于是在 popup 元素上设置该属性，禁用元素（及其不可滚动的后代）上的所有手势就可以解决该问题了。

.modal-wrapper{
  touch-action: none;
}

滚动溢出

问题描述：

弹窗内也含有滚动元素，在滚动元素滚到底部或顶部时，再往下或往上滚动，也会触发页面的滚动，这种现象称之为滚动链（scroll chaining）, 但是感觉滚动溢出（overscroll）这个名字更言辞达意。

解决方案–小程序✅ （disable-lower/upper–scroll）

支付宝小程序官方提供的 scroll–view 组件，使用 disable-lower–scroll 与 disable-upper-scroll 属性可以解决问题，如下：

<scroll-view
  class="content"
  scroll-y
  disable-lower-scroll="out-of-bounds"
  disable-upper-scroll="out-of-bounds"
  onTouchMove="{{supportSjs ? sjs.enableScrollEvent : ''}}"
>
  <view a:for="{{100}}" a:for-item="item">
    {{item}}
  </view>
</scroll-view>

背后的原理是，当组件滚动到底部或顶部时，通过调用 event.preventDefault 阻止了所有滚动，从而页面滚动也不会触发了，而在滚动之间则不做处理。

解决方案-H5(未验证)—（overscroll-behavior）

overscroll-behavior 是 CSS 的一个特性，允许控制浏览器滚动到边界的表现，它有如下几个值。

可以尝试：

.content {
  overscroll-behavior: none;
}

简洁干净高性能，不过 Safari 全系不支持，兼容性如下，有没有感觉 Safari 就是现代版的 IE（偶然听路人说的）！

代码007普通

打赏 收藏 海报 链接