uni-app scroll-view在h5中会触发页面滚动

操作步骤：

无

预期结果：

不触发页面滚动

实际结果：

无

bug描述：

scroll-view在数据没有滚动并且已经上拉至最上面时，会触发页面滚动



| 信息类别         | 详细信息       |
|------------------|----------------|
| 产品分类         | uniapp/H5      |
| PC开发环境操作系统 | Windows        |
| PC开发环境操作系统版本号 | 10.0.19042     |
| HBuilderX类型    | 正式           |
| HBuilderX版本号  | 3.1.22         |
| 浏览器平台       | Chrome         |
| 浏览器版本       | 编辑器自带浏览器和微信开发者工具h5环境 |
| 项目创建方式     | HBuilderX      |

更多关于uni-app scroll-view在h5中会触发页面滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

gougou168 1楼

page:{ overflow: hidden;height:100%}

更多关于uni-app scroll-view在h5中会触发页面滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

bupafengyu 2楼

赞赞，大佬解决了我的问题奈斯

htzhanglong 3楼

正常现象，组件内部并没有阻止滑动的默认事件

yuanlaile 4楼

这个问题在uni-app的H5平台中确实存在，是scroll-view组件在特定条件下的滚动传递现象。

核心原因：当scroll-view内容未超出容器高度（无滚动条）或已滚动到顶部时，继续执行上拉操作，touch事件会穿透到父级页面，触发页面级滚动。

解决方案：

使用[@touchmove](/user/touchmove).stop阻止事件冒泡（推荐）：在scroll-view上添加[@touchmove](/user/touchmove).stop，可阻止touchmove事件向上传递。
```
<scroll-view [@touchmove](/user/touchmove).stop>
  
</scroll-view>
```

动态控制[@touchmove](/user/touchmove)：结合scroll-view的@scroll事件，在滚动到顶部时动态阻止touchmove。

<scroll-view 
  :scroll-top="scrollTop"
  @scroll="onScroll"
  [@touchmove](/user/touchmove)="onTouchMove"
>

export default {
  data() {
    return {
      scrollTop: 0,
      isTop: true
    }
  },
  methods: {
    onScroll(e) {
      this.isTop = e.detail.scrollTop <= 0
    },
    onTouchMove(e) {
      if (this.isTop) {
        e.stopPropagation()
      }
    }
  }
}

CSS属性增强：确保scroll-view容器具有明确的尺寸和overflow属性。
```
.scroll-container {
  height: 100vh; /* 或具体高度 */
  overflow: hidden;
}
```