页面描述:页面分为左右两个部分,左边是目录树,右边是id=main_box的div,在main_box中含有多个div并列,上下排布,数量较多,页面上放不下,所以设置了main_box的css样式:
.main_box {
overflow-y:scroll;
}
让main_box可以滚动,但是我希望知道滚动到哪个子div了,好让左边的目录树对应的节点高亮显示
mounted() {
this.refreshData();
// 通过$refs获取dom元素
this.box = this.$refs.viewBox;
// 监听这个dom的scroll事件
this.box.addEventListener('scroll', () => {
/*console.log(" scroll " + this.$refs.viewBox.scrollTop);*/
var current_offset_top = this.$refs.viewBox.scrollTop;
if(this.elements.low.index == this.elements.high.index){
//初始状态
this.elements.high.index ++;
let i = this.elements.high.index;
var catogry = this.code_data[i].catogry;
var id = this.gernerateId(catogry,i);
var e = document.getElementById(id);
if(e == undefined || e == null){
console.log("getElementById没有找到id为"+id+"的元素");
}
else{
this.elements.high.offsetTop = e.offsetTop;
}
}
else if( current_offset_top >= this.elements.low.offsetTop && current_offset_top <= this.elements.high.offsetTop){
//缓存数据未过期
}
else if(current_offset_top < this.elements.low.offsetTop){
//向上滚动,超出低区域
//找到第一个满足offsetTop < current_offset_top的元素
var cahce = this.elements.low.offsetTop;
for(let i = this.elements.low.index;i >=0;i--){
var catogry = this.code_data[i].catogry;
var id = this.gernerateId(catogry,i);
var e = document.getElementById(id);
if(e == undefined || e == null){
console.log("getElementById没有找到id为"+id+"的元素");
}
else if(e.offsetTop < current_offset_top){
//找到
this.elements.low.index = i;
this.elements.low.offsetTop = e.offsetTop;
this.elements.high.index = i + 1;
this.elements.high.offsetTop = cahce;
break;
}
else{
//没有找到,下一轮循环继续
cahce = e.offsetTop;
}
}
}
else{
//向下滚动,超出高区域
var cahce = this.elements.low.offsetTop;
//找到第一个满足offsetTop > current_offset_top的元素
for(let i = this.elements.high.index;i <= this.code_data.length;i++){
var catogry = this.code_data[i].catogry;
var id = this.gernerateId(catogry,i);
var e = document.getElementById(id);
if(e == undefined || e == null){
console.log("getElementById没有找到id为"+id+"的元素");
}
else if(e.offsetTop > current_offset_top){
//找到
this.elements.high.index = i;
this.elements.high.offsetTop = e.offsetTop;
this.elements.low.index = i - 1;
this.elements.low.offsetTop = cahce;
break;
}
else{
//没有找到,下一轮循环继续
cahce = e.offsetTop;
}
}
}
/*console.log("low is "+this.elements.low.index);
console.log("high is "+this.elements.high.index);
console.log("滚动到了:"+this.code_data[this.elements.low.index].title+'与'+this.code_data[this.elements.high.index].title+'之间');*/
// 设置左边目录树中对应节点高亮
this.$refs.viewTree.setCurrentKey(this.code_data[this.elements.high.index].catogry);
}, false);
}
因为页面的构建使用了vue和element-ui所以是放在mounted函数中的
data() {
return {
/*别的代码省略*/
elements:{
low:{
index:0,
offsetTop:0
},
high:{
index:0,
offsetTop:0
}
},
}
},
方法是别的网站上看来的,具体链接忘记了,就不贴了