js监听div滚动事件,vue div滚动条滚动事件
本文主要介绍vue监测页面中一个div的滚动事件，判断滚动位置。通过示例代码非常详细的介绍，有一定的参考价值，感兴趣的朋友可以参考一下。
在开发中，我们经常会遇到这样的vue页面，它分为两部分：左边是目录树，右边是一个名为xq-box的div。在xq-box中，多个div并排布局，每个div的内容对应左侧目录树中的相应节点。现在，我们的目标是监视这个xq-box滚动事件。一旦右滚开始，你要知道你滚动到哪个子div，让左边的目录树怎么做？
1.首先，写出大概的页面布局。这里需要注意的是，右边xq-box的子div要绑定“xqItem”的id“序列号”，才能得到与下面js匹配的dom元素：
模板
div class=容器
div class=left-box
div class=菜单框
div class=菜单标题
p目录/p
/div
差异
class=菜单项
菜单列表中的v-for=(菜单，索引
:key=index
:class= { active :menu active===index }
@click=chooseMenu(menu.name，index)
img:src= menu . icon class= menu-icon /
p{{ menu.name }}/p
/div
/div
/div
div class=右框
div class=xq-box ref=xqBox
差异
class=xq-item
:id= xqItem index
xqConList中的v-for=(item，index)
:key=index
！-在此呈现目录的内容-
div class=xq-item-name
{{ item.name }}
/div
div class=xq-item-con
{{ item.content }}
/div
/div
/div
/div
/div
/模板
2.然后，在css中给出xq-box的高度，并将其设置为滚动超出限制：
style lang=stylus 范围。右框
高度600像素。xq-box
高度100%
溢出-y自动
风格
3.然后，通过计算属性得到这个ref=xqBox 的dom元素，写一个函数handleScroll()得到滚动距离并确定滚动到哪两个子div，在页面渲染后监控这个xq-box的滚动事件。
导出默认值{
姓名：菜单列表，
data() {
返回{
Menuative: 0，//左侧突出显示的项目
MenuList: []，//左侧目录树
XConList:[]//右侧目录内容列表
}
},
计算值：{
xqBox() {
归还这个。$ refs.xqBox
}
},
已安装(){
这个。$nextTick(()={
////侦听此dom的滚动事件
//this.xqBox.onscroll=()={
//console . log( on scroll )；
//this . handle scroll()；
//};
//侦听此dom的滚动事件
this . xqbox . addevent listener( scroll ，this . handle scroll)；
});
},
方法：{
handleScroll() {
//获取dom的滚动距离
const scroll top=this . xqbox . scroll top；
//获取可视区域的高度
const offset height=this . xqbox . offset height；
//获取滚动条的总高度
const scroll height=this . xqbox . scroll height；
//xqconflist是目录内容的列表。
for(设I=0；I this . xqconlist . length-1；i ) {
//offsetTop:获取当前元素到其定位的父元素的顶部距离。
让offset_before=this。$el.querySelector(#xqItem i)。offsetTop
让offset_after=this。$el.querySelector(#xqItem (i 1))。offsetTop
//根据xqItem到顶部的距离，确定滚动距离落在哪两项之间。
if(scroll top=offset _ before scroll top offset _ after){
//console.log(offset ，offset_before，offset_after，scroll top)；
//console.log(scrollHeight ，scrollTop，offsetHeight，scroll height)；
//确定是否已经滚动到底部。
if(scroll top offset height=scroll height){
//到顶部的距离加上可视区域的高度等于或大于滚动条到达底部的总高度。
//console.log(滚动到底部)；
if (this.menuActive i) {
this . menu active=I；
}
}否则{
this . menu active=I；
}
打破；
}
}
},
}
};
根据查询，Vue组件将对此进行分配。$el作为补丁阶段结束时挂载的根dom元素，我们可以直接使用$el的QuerySelector、QuerySelector等方法获取匹配的元素。因为1中内容块的每个子div都绑定了一个id，所以您可以用这个来获取每个子div。$ el.queryselector (# xqitem i)。
还有一点需要注意的是，判断xq-box是否滚动到底部的原因是，一旦滚动到底部，就可以看到最后几个目录对应的子div。此时滚动距离scrollTop只会落在这些最后一个子DIV的第一个子DIV的顶距上(当前周期中序号为I)。此时，如果左侧目录树突出显示这些最后的目录中的任何一个，则没有必要改变突出显示。但是，如果this.menuActive的值仍然小于最后一个子div的第一个的序号，即小于本周期的I，则需要将其更改为当前的I值。
4.如果要点击左边的目录树，右边的xq-box会自动滚动到相应的目录内容，添加以下方法：
选择菜单(名称，索引){
this.menuActive=index
////可以使用scrollIntoView
//document . query selector( # xqi tem index)。scrollIntoView({
//block: start ，
//行为：“平滑”
//});
让offsetTop=this。$ El . query selector( # xqi tem index)。offsetTop
console . log( # xqi tem index offsetTop: offsetTop )；
this.xqBox.scrollTop=this。$el.querySelector(
#xqItem 索引
).offsetTop
},
这样就实现了“监控这个xq-box滚动事件，一旦右侧开始滚动，你需要知道你滚动到了哪个子div，并在左侧目录树中高亮显示对应的节点”的功能。
关于vue监测页面中一个div的滚动事件并判断滚动位置的这篇文章到此为止。更多关于vue监控div滚动事件的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。