问题描述

uniApp 中使用蒙层 模态框等弹出组件都会遇到滚动穿透问题即上层滚动会连带下层滚动。

解决方法

解决方法1：

在弹出层显示时，底层设置overflow:hiden以达到禁止底层滚动的效果。

优点：编码简单

缺点：由于设置了overflow:hiden，底部元素会默认滚动到顶部，意味着之前滚动的距离会被清空

<template>
  <view :class="drawerShow ? 'disabledScrool' : ''">
  </view>
</template>
<style>
    /*解决search组件滑动穿透*/
  .disabledScrool {
    overflow: hidden;
    height: 100vh;
  }
</style>

解决方法2（建议）：

在某层上面添加@touchmove.stop 阻止滚动事件，这种情况弹出层的内容会被阻止滚动，如果内容过多想要滚动不能再使用overflow:auto的方式，必须使用scroll-view 来滚动。

优点：彻底解决滚动穿透问题

缺点：引入了scroll-view，编码会比较复杂

<view
  @touchmove.stop.prevent
  @click.stop="handleCancle"
  >
  <scroll-view
    style="height: 600rpx"
    scroll-y="true"
    class="content scroll-bar wd-text-base wd-overflow-auto wd-h-0 wd-flex-1 wd-mb-64rpx"
    show-scrollbar
    @touchmove.stop.prevent
    @scrolltolower="scrolltolower"
  >
  <!-- todo -->
	</scroll-view>
</view>

涉及知识点补充

H5端touchmove 事件控制

备注

APP端滚动穿透问题让人打脑阔！