vue监听页⾯中的某个div的滚动事件并判断滚动的位置在开发中常常会遇到这样⼀个vue页⾯，页⾯分为左右两部分，左边是⽬录树，右边是⼀个类名为xq-box的div，在xq-box中
多个div上下并列布局，每个div中的内容就对应着左边⽬录树中的相应节点，现在的⽬标是，要监听这个xq-box滚动事件，右边⼀旦开始滚动，就要知道滚动到哪个⼦div，并让左边的⽬录树中对应的节点⾼亮显⽰。要怎么做呢？
1、⾸先，先写好⼤概的页⾯布局，这⾥要注意，右边xq-box的⼦div要绑定"'xqItem'+序号"的id，为了下⾯⽤js能获取到匹配的dom元素：
<template>
<div class="container">
<div class="left-box">
<div class="menu-box">
<div class="menu-title">
<p>⽬录</p>
</div>
<div
class="menu-item"
v-for="(menu, index) in menuList"
:key="index"
:class="{ 'active': menuActive === index }"
@click="chooseMenu(menu.name, index)"
>
<img :src="menu.icon" class="menu-icon" />
<p>{{ menu.name }}</p>
</div>
</div>
</div>
<div class="right-box">
<div class="xq-box" ref="xqBox">
<div
class="xq-item"
:id="'xqItem' + index"
v-for="(item, index) in xqConList"
:key="index"
>
<!--这⾥渲染出⽬录内容-->
<div class="xq-item-name">
{{ item.name }}
</div>
<div class="xq-item-con">
{{ t }}
</div>
</div>
</div>
</div>
</div>
</template>
2、然后，在css⾥给xq-box⾼度，设置其超出能滚动：
<style lang="stylus" scoped>
.right-box
height 600px
.xq-box
height 100%
overflow-y auto
<style>
3、接着，在计算属性获取到这个ref="xqBox"的dom元素，写⼀个函数handleScroll()获取滚动距离并判断滚动到哪两个⼦div 之间，并在页⾯渲染完后监听这个xq-box的滚动事件。
export default {
name: "menuList",
data() {
return {
menuActive: 0,  //左侧⾼亮的item
menuList: [],  //左侧⽬录树
xqConList: []  //右侧⽬录内容列表
}
},
computed: {
xqBox() {
return this.$refs.xqBox;
}
},
mounted() {
this.$nextTick(() => {
// //监听这个dom的scroll事件
// scroll = () => {
jquery滚动条滚动到底部//  console.log("on scroll");
//  this.handleScroll();
// };
//监听这个dom的scroll事件
this.xqBox.addEventListener("scroll", this.handleScroll);
});
},
methods: {
handleScroll() {
//获取dom滚动距离
const scrollTop = this.xqBox.scrollTop;
//获取可视区⾼度
const offsetHeight = this.xqBox.offsetHeight;
//获取滚动条总⾼度
const scrollHeight = this.xqBox.scrollHeight;
//xqConList 为⽬录内容列表
for (let i = 0; i < this.xqConList.length - 1; i++) {
/
/offsetTop: 获取当前元素到其定位⽗级（offsetParent）的顶部距离
let offset_before = this.$el.querySelector("#xqItem" + i).offsetTop;
let offset_after = this.$el.querySelector("#xqItem" + (i + 1))
.offsetTop;
//根据xqItem离顶部距离判断滚动距离落在哪两个item之间
if (scrollTop >= offset_before && scrollTop < offset_after) {
// console.log("offset", offset_before, offset_after, scrollTop);
// console.log("scrollHeight", scrollTop, offsetHeight, scrollHeight);
//判断是否滚动到了底部
if (scrollTop + offsetHeight >= scrollHeight) {
// 把距离顶部的距离加上可视区域的⾼度等于或者⼤于滚动条的总⾼度就是到达底部
/
/ console.log("已滚动到底部");
if (uActive < i) {
}
} else {
}
break;
}
}
},
}
};
经查询得知，Vue组件在patch阶段结束时会把this.$el赋值为挂载的根dom元素，我们可以直接使⽤$el的querySelector, querySelectorAll等⽅法获取匹配的元素。因1中每个内容块⼦div已经绑定id，所以此处可以⽤
this.$el.querySelector("#xqItem" + i) 获取到每个⼦div。
还有⼀个要注意的是，这⾥之所以要判断是否滚动到了底部，是因为xq-box⼀旦滚动到底部，就可以看到最后⼏个⽬录对应的⼦div，此时的滚动距离scrollTop只会落在这最后⼏个⼦div的第⼀个⼦div（序号即当前本次循环中的i）的离顶部距离位置上，这个时候如果左侧⽬录树⾼亮的正好是这最后⼏个⽬录的其中任意⼀个，则⽆需更改⾼亮；但是如果此时
4、如果要点击左边⽬录树，右边xq-box也要⾃动滚动到相应的⽬录内容，则要增加以下⽅法：
chooseMenu(name, index) {
// //可以⽤scrollIntoView
// document.querySelector("#xqItem" + index).scrollIntoView({
//  block: "start",
//  behavior: "smooth"
// });
let offsetTop = this.$el.querySelector("#xqItem" + index).offsetTop;
console.log("#xqItem" + index + " offsetTop: " + offsetTop);
this.xqBox.scrollTop = this.$el.querySelector(
"#xqItem" + index
).offsetTop;
},
这样，“监听这个xq-box滚动事件，右边⼀旦开始滚动，就要知道滚动到哪个⼦div，并让左边的⽬录树中对应的节点⾼亮显⽰”这个功能便实现了。
到此这篇关于vue监听页⾯中的某个div的滚动事件并判断滚动的位置的⽂章就介绍到这了，更多相关vue监听div滚动事件内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。