概要

如题，在vue项目里监听了 scroll事件 ，但是在移动端测试不会执行 scroll事件 的回调，监听事件失效
有一些说法说是移动端没有 scroll事件 ，经测试是有的。

分析原因

1. 要保证可以监听 scroll事件 ，首先要保证这个dom节点本身是滚动容器，之前遇到这种情况，给子元素加了滚动事件，监听不到，但实际上可滚动的容器是父组件，所以监听在子元素的 scroll 不会触发

比如下面这样的监听方法，就是不会生效的


child.addEventListener('scroll', this.handleScroll)


<div class="parent">
  <div class="child"></div>
</div>

.parent {
  height: 500px;
  overflow-y: scroll;
}

解决方法就是需要改 css ，将 child 变为滚动容器

.parent {
  height: 500px;
  overflow: hidden;
}

.child {
  height: 100%;
  overflow-y: scroll;
}

2. 就是有可能监听了 touch 相关事件，和 scroll 事件冲突

最后修改：2023 年 03 月 10 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏或留下你的评论~