Vue中无效的`scroll`事件handle

发表于 更新于 分类于 本文字数： 547 阅读时长 ≈ 1 分钟

最近在实现文章列表懒加载的时候，遇到了监听组件内的scroll事件失效的情况。这个时候就有点诡异。其实问题在于scroll事件到底发生在什么地方。

按照scroll事件的说法，该事件会被具备滑条的元素在滑动时触发。那么真的是我们绑定元素触发了scroll事件吗？

有的时候不是这样的。比如说在父组件在子组件的外边包了一层，比如说div。

1
2
3
4
5
6
7
8
9
10
11
12
// Parent.vue
<template>
<div>
<child></child>
</div>
</template>

// Child.vue
<template>
<div v-on:scroll="onScroll">
</div>
</template>

此时如果滑动滑条的的话。不一定是Child.vue中的div的触发scroll，而是Parent.vue中的div触发滑条事件。由于外层的div会被child撑开而形成滑条。而触发scroll事件。此时，由于事件冒泡的机制，内部元素无法捕捉到事件。这种调试可以使用Chrome的performance调试工具查看scroll事件的root元素。