概要

如题,在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 事件冲突

Last modification:March 10th, 2023 at 10:10 am
如果觉得我的文章对你有用,请随意赞赏或留下你的评论~