Html中
<div v-for="(item,index) in contents" :key="index" v-html="item" class="d_jump"></div>
<ul>
<li v-for="(itemy,index) in articleName" :key="index" :class="{active:catalogCur==index}" @click="jump(index)">{{itemy}}</li>
</ul>
Vue数据
export default { data () { return { catalogCur:0 } } }
js方法
/*监听滚动(结合前面的@scroll) */
scrollEvent(e){
let scrollItems = document.querySelectorAll('.d_jump')
for (let i = scrollItems.length - 1; i >= 0; i--) {
//判断滚动条滚动距离是否大于当前滚动项可滚动距离
let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop
if (judge) {
this.catalogCur = i
break
}
}//滚动条触底了
if(e.srcElement.scrollTop+e.srcElement.offsetHeight==e.srcElement.scrollHeight){
this.catalogCur = this.articleName.length-1
}//console.log(e.srcElement.scrollTop)//滚动条高度
//console.log(e.srcElement.offsetHeight)//屏幕高度
//console.log(e.srcElement.scrollHeight)//内容高度
//'下拉获取更多'的功能(还有10像素就触发)：滚动的像素+容器的高度>可滚动的总高度-10像素
}
/*目录点击定位效果：有兼容问题，借鉴了很多其他方法却一直不成功，无奈之后使用了scrollIntoView*/
jump (index) {
this.catalogCur=index;
let jump = document.querySelectorAll('.d_jump')
jump[index].scrollIntoView({block: "start", behavior: "smooth"});
}
样式
li{
position: relative;
height: 45px;
line-height: 45px;
padding-left: 15px;
}
li.active{
color: #2f9fca;
}
li.active{
color: #2f9fca;
}
li.active::before{
content: " ";
position: absolute;
height: 20px;
width: 2px;
background-color: #2f9fca;
left: 0;
top:13px;
}
li.active::before{
content: " ";
position: absolute;
height: 20px;
width: 2px;
background-color: #2f9fca;
left: 0;
top:13px;
}
