北京华网天下

移动端开发中模态框滚动穿透问题的原因分析与解决方案详解

2025-03-10

来源：网络整理

滚动渗透问题描述：

当在移动终端上开发模态框时（Mini程序也将出现），当模态框下的页面超过一个屏幕时，在定位的弹出式掩码层上滑动，下面的内容也将一起滑动，就好像事件渗透到下面的DOM元素一样。我们比较单击以渗透，并将其称为滚动穿透。

问题的原因：

通过事件的外观，可以推断出文档的滚动事件是触发的，因此我们可以禁用滚动事件。

案例伪代码：解决方案e。（）

mini程序 - 脚本语法，通过e。（）阻止元素的 - 移动事件。（同样，H5，聆听 - 移动事件并防止其 - 移动事件）

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

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

解决方案B（ - ）

默认情况下，PAN（滚动）和变焦手势是由浏览器专门处理的，但是可以通过CSS功能更改触摸手势的行为。选择几个值如下。

价值描述

汽车

使浏览器可以处理所有锅和变焦手势。

没有任何

禁用浏览器以处理所有PAN和变焦手势。

启用锅和缩放手势，但请禁用其他非标准手势，例如双击变焦。

-飞涨

启用多指平移和缩放页面。

因此，将此属性设置在元素上，并禁用元素上的所有手势（及其不可滚动的后代）可以解决问题。

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

滚动溢出问题描述：

弹出窗口还包含滚动元素。当滚动元素滚动到底部或顶部时，向下或向上滚动也会触发页面滚动。这种现象称为滚动链（），但感觉就像滚动溢出的名称更有意义。

解决方案 - 迷你程序（ - / - ）

Mini程序提供的-View组件可以使用 - 和 - 属性，如下：

<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>