html部分
<div class="nav">
<div v-for="(item, index) in data" :key="item[0] + 1" :index="index" :class="{ chosen: index == 0 }">
{{ item[0] }}
</div>
</div>
<div id="content">
<section v-for="item in data" :key="item[0]">
</section>
</div>
js处理部分
let content = document.getElementById('content')
let aSec = content.querySelectorAll('section')
let oNav = document.querySelector('.nav')
let aBtn = document.querySelectorAll('.nav>div')
let scrollTime = null
oNav.onclick = e => {
if (e.target != oNav && Array.prototype.indexOf.call(e.target.classList, 'chosen') == -1) {
Array.prototype.forEach.call(aBtn, item => {
item.classList.remove('chosen')
})
e.target.classList.add('chosen')
this.scrollMove(content, aSec[e.target.getAttribute('index')].offsetTop, 200)
}
}
scrollMove(obj, topValue, time) {
let speed = Math.round((topValue - obj.scrollTop) / Math.round(time / 10))
clearInterval(scrollTime)
scrollTime = null
scrollTime = setInterval(() => {
if (
Math.abs(obj.scrollTop - topValue) >= Math.abs(speed) &&
obj.scrollTop + speed < obj.scrollHeight - obj.clientHeight
) {
obj.scrollTo(0, obj.scrollTop + speed)
} else {
obj.scrollTo(0, topValue)
clearInterval(scrollTime)
scrollTime = null
}
}, 10)
}
content.onscroll = () => {
if (!scrollTime) {
Array.prototype.forEach.call(aSec, (item, index) => {
if (content.scrollTop + content.clientHeight == content.scrollHeight) {
Array.prototype.forEach.call(aBtn, item2 => {
item2.classList.remove('chosen')
})
aBtn[aSec.length - 1].classList.add('chosen')
} else {
if (index != aSec.length - 1) {
if (
content.scrollTop + 100 >= aSec[index].offsetTop &&
content.scrollTop + 100 < aSec[index + 1].offsetTop
) {
Array.prototype.forEach.call(aBtn, item2 => {
item2.classList.remove('chosen')
})
aBtn[index].classList.add('chosen')
}
} else {
if (content.scrollTop + 100 >= aSec[index].offsetTop) {
Array.prototype.forEach.call(aBtn, item2 => {
item2.classList.remove('chosen')
})
aBtn[index].classList.add('chosen')
}
}
}
})
}
}