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數(shù)據(jù)
export default { data () { return { catalogCur:0 } } }
js方法
/*監(jiān)聽滾動(結(jié)合前面的@scroll) */
scrollEvent(e){
let scrollItems = document.querySelectorAll('.d_jump')
for (let i = scrollItems.length - 1; i >= 0; i--) {
//判斷滾動條滾動距離是否大于當(dāng)前滾動項(xiàng)可滾動距離
????????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)//內(nèi)容高度
//'下拉獲取更多'的功能(還有10像素就觸發(fā))：滾動的像素+容器的高度>可滾動的總高度-10像素
}
/*目錄點(diǎn)擊定位效果：有兼容問題培廓，借鑒了很多其他方法卻一直不成功亲雪，無奈之后使用了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;
}
