如何使用vue监听页面中某个div的滚动事件并判断滚动位置(vue,开发技术)

在开发中常常会遇到这样一个vue页面，页面分为左右两部分，左边是目录树，右边是一个类名为xq-box的div，在xq-box中多个div上下并列布局，每个div中的内容就对应着左边目录树中的相应节点，现在的目标是，要监听这个xq-box滚动事件，右边一旦开始滚动，就要知道滚动到哪个子div，并让左边的目录树中对应的节点高亮显示。要怎么做呢？

1、首先，先写好大概的页面布局，这里要注意，右边xq-box的子div要绑定"'xqItem'+序号"的id，为了下面用js能获取到匹配的dom元素：

2、然后，在css里给xq-box高度，设置其超出能滚动：

3、接着，在计算属性获取到这个ref="xqBox"的dom元素，写一个函数handleScroll()获取滚动距离并判断滚动到哪两个子div之间，并在页面渲染完后监听这个xq-box的滚动事件。

经查询得知，Vue组件在patch阶段结束时会把this.$el赋值为挂载的根dom元素，我们可以直接使用$el的querySelector, querySelectorAll等方法获取匹配的元素。因1中每个内容块子div已经绑定id，所以此处可以用 this.$el.querySelector("#xqItem" + i) 获取到每个子div。

还有一个要注意的是，这里之所以要判断是否滚动到了底部，是因为xq-box一旦滚动到底部，就可以看到最后几个目录对应的子div，此时的滚动距离scrollTop只会落在这最后几个子div的第一个子div（序号即当前本次循环中的i）的离顶部距离位置上，这个时候如果左侧目录树高亮的正好是这最后几个目录的其中任意一个，则无需更改高亮；但是如果此时 this.menuActive 的值还比最后几个子div中的第一个的序号要小，即比本次循环的 i 要小，则需要更改为当前的 i 值。

4、如果要点击左边目录树，右边xq-box也要自动滚动到相应的目录内容，则要增加以下方法：

这样，“监听这个xq-box滚动事件，右边一旦开始滚动，就要知道滚动到哪个子div，并让左边的目录树中对应的节点高亮显示”这个功能便实现了。