如图 点击右侧便签,将页面滚动到相应的位置,并且鼠标滚动到相应位置时右侧便签高亮
功能 1. 点击右侧便签 页面滚动相应位置
我们首先给需要定位滚动的四个部分最头部分别设置唯一的 id ,其次我们点击右侧便签传入他们对应的 id 进行滚动
//点击便签滚动
function roll(item, selector) {
fage.value = !item ? 1 : item //控制高亮的按钮
selector = !selector ? 'nengli' : selector //判断当前是否有传入对的 id 如果有那么不是点击的回到顶部 如果没有那么就是点击的回到顶部
document.getElementById(selector).scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start" // 上边框与视窗顶部平齐。默认值
});
}
如果你不涉及到高亮等功能 只是简单的点击滚动的话 那么只需要通过 document 来滚动即可!
功能 2. 鼠标滚动到相应位置时 右侧便签高亮
由于我是父组件内滚动 所以使用 wheel 监听滚动 如果是页面滚动 那么使用 window 的滚动事件即可
//滚动事件
function onScroll(event) {
if (document.getElementById('box').scrollTop + 200 > document.getElementById('zhuanxiang').offsetTop - document.getElementById('box').offsetTop) {
fage.value = 2
}
if (document.getElementById('box').scrollTop + 200 > document.getElementById('zhuanye').offsetTop - document.getElementById('box').offsetTop) {
fage.value = 3
}
if (document.getElementById('box').scrollTop + 200 > document.getElementById('zonghe').offsetTop - document.getElementById('box').offsetTop) {
fage.value = 4
}
if (document.getElementById('box').scrollTop < 100) {
fage.value = 1
}
}
以上的代码是当鼠标滚动是 计算出滚动的距离如果大于 需要高亮的 div 到顶部的距离 那么就是已经滚动到当前位置了 那么就控制高亮