uni-app Scroll-view 在加上@touchmove.stop 属性后 有时候还会触发穿透滚动

uni-app Scroll-view 在加上@touchmove.stop 属性后 有时候还会触发穿透滚动

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

操作步骤：

`` 进入页面,手指直接向下滑动,会触发 ; 或者 ,到达底部以后,停顿一会,手指直接向上滑动,会触发,并且会触发页面滚动条`

预期结果：

`` 正常应该整个scroll-view和底层页面不动或者scroll-view 会弹性滑动一下`

实际结果：

`` scroll 不动,底层页面会动,明显的bug`

bug描述：

下载附件


更多关于uni-app Scroll-view 在加上@touchmove.stop 属性后 有时候还会触发穿透滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

bump 这个问题在最新版本 3.5.3 和 3.5.4alpha 还存在。 scroll-view 在position： fixed，sticky的情况下，滚动会触发底层page的scroll，即使加@touchmove.stop也不行

更多关于uni-app Scroll-view 在加上@touchmove.stop 属性后 有时候还会触发穿透滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我的也会出现这个问题

2023年了，这个问题解决了吗

这是一个常见的滚动穿透问题，在uni-app中使用scroll-view时确实会遇到。针对您描述的情况，建议尝试以下解决方案：

  1. 在scroll-view上同时添加@touchmove.stop.prevent组合修饰符，比单独使用@touchmove.stop更有效：
<scroll-view 
  @touchmove.stop.prevent
  scroll-y
>
  <!-- 内容 -->
</scroll-view>
  1. 如果仍有穿透，可以在页面的onPageScroll生命周期中添加判断逻辑：
onPageScroll(e) {
  if(this.scrollViewActive) {  // 定义一个状态控制变量
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 0
    })
  }
}
  1. 对于iOS平台特有的弹性滚动问题，可以尝试设置页面样式：
page {
  overflow: hidden;
  height: 100%;
}
  1. 确保scroll-view设置了确定的高度值，例如：
<scroll-view style="height: 100vh;">
  <!-- 内容 -->
</scroll-view>
回到顶部