Vue2实现主内容滚动到指定位置时，侧边导航栏也跟随选中变化

需求背景：

PC端项目需要实现一个有侧边导航栏，可点击跳转至对应内容区域，类似锚点导航，

同时主内容区域上下滚动时，可实现左侧导航栏选中样式能实时跟随变动的效果。

了解了一下，Element Plus 组件库 和 Ant Design Vue 组件库内自带此功能组件：

Anchor 锚点 | Element Plus

---

Anchor 锚点 — 用于跳转到页面指定位置。

---

但是奈何自己的项目依旧还是 Vue2 版本的 Element 组件库，

SO，用不了，没办法只能另辟蹊径，寻找其他解决方案。

百度一波之后的参考文献：

此篇内有效果展示图：https://zhuanlan.zhihu.com/p/476337029

（ 不过文章内容缺少一些代码段信息，需自行到文章下面的代码仓库查阅：

import utils from '@/utils'
import { getScrollContainer } from '@/utils/dom'  ）

又参考了几篇文献 ：

实现主内容滚动到指定位置，侧边栏也跟随变化_侧边栏滚动定位

最后采用的demo文献 ：

vue实现内容滚动时，侧边导航跟随选中 - 简书

（ 此篇文章代码基本都是写死的内容，不具有可变性，但是大致提供了一个思路 ）

---

根据参考文献后改进优化后的代码 ：

html 部分

<template><div class="container"><ul class="nav"><li v-for="(item, index) in domainLineList" :key="index"><a@click="navClick(index)":class="{ bbactive: selectedItem === index }">{{ item.deptName }}</a></li></ul><article><h1v-for="(item, index) in domainLineList":key="index":id="'div' + index">{{ item.deptValue }}</h1></article></div>
</template>

javascript 部分

<script>
export default {name: "container",data() {return {selectedItem: 0,domainLineList: [{deptName: "奢香夫人",deptValue: `男：落脚河上面崖对崖威宁草海荞花盛开谁把月亮挂天上照得想说的话 流成海流成海流成海流成海女：越过绵绵的高山越过无尽的沧海如果期待依然在总是春暖到花开请你轻轻留下来让梦卷走这尘埃香飘在书厢之外奏响美丽的天籁男：不等三更过天晓白奢香夫人赶月归来她把日光画心上照得漆黑的夜 亮堂堂亮堂堂亮堂堂亮堂堂女：越过绵绵的高山越过无尽的沧海如果期待依然在总是春暖到花开请你轻轻留下来让梦卷走这尘埃香飘在书厢之外奏响美丽的天籁合：乌蒙山连着山外山月光洒下了响水滩有没有人能告诉我可是苍天对你在呼唤一座山翻过一条河千山万水永不寂寞你来过 年华被传说百里杜鹃不凋落乌蒙山连着山外山月光洒下了响水滩有没有人能告诉我可是苍天对你在呼唤一座山翻过一条河走过千山万水永不寂寞你来过 年华被传说百里杜鹃不凋落女：怀念总在心头绕我们记忆的凭吊善良的心跳男：我寻着你的路 让风都停住依然清晰看见你那坚强的脚步如果天留得住 如果地也能把你挽住愿你就在这片云水间常驻合：乌蒙山连着山外山月光洒下了响水滩有没有人能告诉我可是苍天对你在呼唤一座山翻过一条河千山万水永不寂寞你来过 年华被传说百里杜鹃不凋落乌蒙山连着山外山月光洒下了响水滩有没有人能告诉我可是苍天对你在呼唤一座山翻过一条河走过千山万水不寂寞你来过 年华被传说百里杜鹃不凋落`,},{deptName: "等爱的玫瑰",deptValue: `我走在 荒凉的沙漠我躲在 无人的角落我听见 飘渺的传说是谁在飞扬自由的歌风吹过 漫天的寂寞爱无根 枯萎的花朵我祈祷 不变的承诺是谁在安慰心中饥渴我要向前飞我是等爱的玫瑰心中浅藏着待放的花蕊如果你给我真实的安慰我愿为你展现我的美曾经被风吹我是受伤的玫瑰眼中深埋着滚烫的泪水尘世中太多虚幻的安慰完美背后看见了心碎是谁风干的温柔给我憧憬的理由多少人都曾经为爱虔诚的祈求谁不渴望天长地久只怕繁华落尽海市蜃楼风吹过 漫天的寂寞爱无根 枯萎的花朵我祈祷 不变的承诺是谁在安慰心中饥渴又有谁从来没有受过伤害但是我们还是要继续找到真爱感情复杂 难免会有失败未来的路更值得我们期待不要怕有我陪着你安慰你心疼你直到你找到爱的真谛得到幸福的你会明白一切付出原来都是值得的我要向前飞我是等爱的玫瑰心中浅藏着待放的花蕊如果你给我真实的安慰我愿为你展现我的美曾经被风吹我是受伤的玫瑰眼中深埋着滚烫的泪水尘世中太多虚幻的安慰完美背后看见了心碎是谁风干的温柔给我憧憬的理由多少人都曾经为爱虔诚的祈求谁不渴望天长地久只怕繁华落尽海市蜃楼我要向前飞我是等爱的玫瑰心中浅藏着待放的花蕊如果你给我真实的安慰我愿为你展现我的美曾经被风吹我是受伤的玫瑰眼中深埋着滚烫的泪水尘世中太多虚幻的安慰完美背后看见了心碎尘世中太多虚幻的安慰完美背后看见了心碎`,},{deptName: "冬天的秘密",deptValue: `取暖回忆回忆无香有阳光还感觉我站在分隔岛没有方向不想回你太善良你太美我讨厌这样想你的自不屑此刻的我太感与脆弱为没有魂魄化体温成尴尬的始终独自怀抱这个秘但朋友都说我太过忧爱你我不能看你们拥抱甜谈笑自若忍受逾期的伤如果我说我真的爱谁来收那些被破坏的友如果我忍住这个秘温暖冬就会遥遥而无你太善良你太美我讨厌这样想你的自不屑此刻的我太感与脆弱为没有魂魄化体温成尴尬的始终独自怀抱这个秘但朋友都说我太过忧爱你我不能看你们拥抱甜谈笑自若忍受逾期的伤如果我说我真的爱谁来收那些被破坏的友如果我忍住这个秘温暖冬天就会遥遥而无如果我说我必须爱答应给比友谊更完整的如果我忍住这个秘就该错过埋葬冬天的秘如果我说我真的爱谁来收拾这被破坏的友如果我忍住这个秘温暖冬天就会遥遥而无就该错过埋葬冬天的秘密`,},{deptName: "姑娘别哭泣",deptValue: `突来的消息 那个人是你这么多年 你杳无音讯时间的橡皮 擦掉了记忆但我迟迟却 没有忘记你秒针的声音 嘀嗒转不停我的心里 住着一个你流过的泪滴 全都因为你原来迟迟都 不曾放下你或许我们就不该 有段因果或许我不该 一味求施舍如果有天 我离开了你的生活如果有天 你还爱着我姑娘为何你要放声哭泣我在路那旁 小河等你你心里到底藏了什么秘密我想紧紧的抱住你你说遇到的人全都像你找不到失去你的意义你说你克制着 不再想起可是我就在你心里秒针的声音 嘀嗒转不停我的心里 住着一个你流过的泪滴 全都因为你原来迟迟都 不曾放下你或许我们就不该 有段因果或许我不该 一味求施舍如果有天 我离开了你的生活如果有天 你还爱着我姑娘为何你要放声哭泣我在路那旁小河等你你心里到底藏了什么秘密我想紧紧的抱住你你说遇到的人全都像你找不到失去你的意义你说你克制着不再想起可是我就在你心里`,},{deptName: "寂寞沙洲冷",deptValue: `自你走后心憔悴白色油桐风中纷飞落花似人有情这个季节河畔的风放肆拼命的吹无端拨弄离人的眼泪那样浓烈的爱再也无法给伤感一夜一夜当记忆的线缠绕过往支离破碎是慌乱占据了心扉有花儿伴着蝴蝶孤雁可以双飞夜深人静独徘徊当幸福恋人寄来红色分享喜悦闭上双眼难过头也不敢回仍然拣尽寒枝不肯安歇微带着后悔寂寞沙洲我该思念谁自你走后心憔悴白色油桐风中纷飞落花似人有情这个季节河畔的风放肆拼命的吹无端拨弄离人的眼泪那样浓烈的爱再也无法给伤感一夜一夜当记忆的线缠绕过往支离破碎是慌乱占据了心扉有花儿伴着蝴蝶孤雁可以双飞夜深人静独徘徊当幸福恋人寄来红色分享喜悦闭上双眼难过头也不敢回仍然拣尽寒枝不肯安歇微带着后悔寂寞沙洲我该思念谁当记忆的线缠绕过往支离破碎是慌乱占据了心扉有花儿伴着蝴蝶孤雁可以双飞夜深人静独徘徊当幸福恋人寄来红色分享喜悦闭上双眼难过头也不敢回仍然拣尽寒枝不肯安歇微带着后悔寂寞沙洲我该思念谁仍然拣尽寒枝不肯安歇微带着后悔寂寞沙洲我该思念谁`,},{deptName: "下一个天亮",deptValue: `用起伏的背影挡住哭泣的有些故事不必说给每个人许多眼睛看的太浅太错过我没被看见那个自用简单的言语解开超载的有些情绪是该说给懂的人你的热泪比我激动怜我发誓要更努力更有勇等下一个天去上次牵手赏花那里散步好有些积雪会自己融你的肩膀是我豁达的天等下一个天把偷拍我看海的照片送我好我喜欢我飞舞的头和飘着雨还是眺望的眼用简单的言语解开超载的有些情绪是该说给懂的人你的热泪比我激动怜我发誓要更努力更有勇等下一个天去上次牵手赏花那里散步好有些积雪会自己融你的肩膀是我豁达的天等下一个天把偷拍我看海的照片送我好我喜欢我飞舞的头和飘着雨还是眺望的眼时间可以磨去我的棱有些坚持却永远磨不请容许我小小的骄因为有你这样的依等下一个天去上次牵手赏花那里散步好有些积雪会自己融你的肩膀是我豁达的天等下一个天把偷拍我看海的照片送我好我喜欢我飞舞的头和飘着雨还是眺望的眼光`,},{deptName: "离别开出花",deptValue: `坐上那朵离家的云霞飘去无人知晓的天涯背着妈妈说的那句话孩子人生其实不复杂喔～眼泪轻轻地擦别管那多嘴乌鸦咽下那些风沙你才能慢慢长大要错过几个她用你最好的年华这是青春的代价当离别开出花伸出新长的枝桠像冬去春又来等待心雪融化你每次离开家带着远方的牵挂那城市的繁华盖住了月牙当离别开出花它生长在悬崖在最高的山顶才听得见回答没什么好害怕孩子放心去飞吧在你的身后有个等你的家坐上那朵离家的云霞飘去无人知晓的天涯背着妈妈说的那句话孩子人生其实不复杂喔～眼泪轻轻地擦别忘那童年梦话散在远方的花也随风慢慢长大要错过几个她用你最真的年华这是青春的回答当离别开出花伸出新长的枝桠像冬去春又来等待心雪融化你每次离开家带着远方的牵挂那城市的繁华盖住了月牙当离别开出花它生长在悬崖在最高的山顶才听得见回答没什么好害怕孩子放心去飞吧在你的身后有个等你的家当离别开出花伸出新长的枝桠像冬去春又来等待心雪融化你每次离开家带着远方的牵挂那城市的繁华盖住了月牙当离别开出花它生长在悬崖在最高的山顶才听得见回答没什么好害怕孩子放心去飞吧在你的身后有个等你的家`,},{deptName: "我想离开浪浪山",deptValue: `我想离开浪浪山是不是该出去闯闯哎呀 别瞎想能有的干就不错了你跟着大王好好干争取早日修炼成精这才是正事天上的星星在闪烁有没有一颗属于我它时常提醒着我 别犯错回家的路多少曲折泪眼婆娑月影斑驳故乡的烛火 在梦里闪烁这个世界好像每天都在重播也许离开浪浪山一个人生活还是就这样继续得过且过怎么好像从来没有人在意过现在的我到底快不快乐就好像离岸的船 无处可停泊可我有时真的有点不知所措迎合太多反而显得笨拙到底那是怎样的我一年都没回来是不是太忙了对对对现在大王给我派了很多事情每天做都做不完哎呀 大王重视你就好这个世界好像每天都在重播也许离开浪浪山一个人生活还是就这样继续得过且过怎么好像从来没有人在意过现在的我到底快不快乐就好像离岸的船 无处可停泊可我有时真的有点不知所措迎合太多反而显得笨拙到底那是怎样的我天上的星星在闪烁有没有一颗属于我它时常提醒着我 别犯错回家的路多少曲折泪眼婆娑月影斑驳故乡的烛火 在梦里闪烁你也不要太拼了你这一个人在外面也没人照顾我想离开浪浪山`,},],};},methods: {// 防抖debounce(func, wait, immediate) {var timeout, args, context, timestamp, result;var later = function () {// 据上一次触发时间间隔var last = new Date() - timestamp;// 上次被包装函数被调用时间间隔last小于设定时间间隔waitif (last < wait && last > 0) {timeout = setTimeout(later, wait - last);} else {timeout = null;// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用if (!immediate) {result = func.apply(context, args);if (!timeout) context = args = null;}}};return function () {context = this;args = arguments;timestamp = new Date();var callNow = immediate && !timeout;// 如果延时不存在，重新设定延时if (!timeout) timeout = setTimeout(later, wait);if (callNow) {result = func.apply(context, args);context = args = null;}return result;};},navClick(index) {var scrollBox1 = document.querySelector(".container");scrollBox1.scrollTo(0, document.getElementById(`div${index}`).offsetTop);this.selectedItem = index;},},mounted() {var self = this;var doc = document;var $scrollBox = doc.querySelector(".container");var scrollCallback = self.debounce(function () {var top = $scrollBox.scrollTop; //设置变量top,表示当前滚动条到顶部的值for (var n = 0; n < self.domainLineList.length; n++) {//在此处通过判断滚动条到顶部的值和当前窗口高度的关系来取得和导航索引值的对应关系if (top >= doc.getElementById(`div${n}`).offsetTop) {if (doc.getElementById(`div${n + 1}`)) {if (top <= doc.getElementById(`div${n + 1}`).offsetTop) {self.selectedItem = n;}} else {self.selectedItem = self.domainLineList.length - 1;}}}}, 500);$scrollBox.addEventListener("scroll", scrollCallback);},
};
</script>

css 部分

<style lang="scss" scoped>
body,
html {height: 100%;
}
#app,
* {margin: 0;padding: 0;
}
.nav li a:hover {border-bottom: 2px solid #0052e4;
}
.bbactive {border-bottom: 2px solid #0052e4;
}
li {list-style-type: none;
}
a {text-decoration: none;outline: 0;
}
.container {position: absolute;top: 0;right: 0;bottom: 0;left: 0;display: flex;overflow: auto;width: 800px;height: 500px;margin: auto;
}
.nav {position: fixed;z-index: 5;display: inline-flex;flex-wrap: wrap;width: 150px;height: inherit;background: #fff;
}
.nav li {display: flex;align-items: center;justify-content: center;width: 100%;
}
.nav li a {font-size: 18px;display: block;padding: 10px 5px;cursor: pointer;color: #3c3c3c;
}
article {display: inline-block;width: 80%;margin-left: 150px;
}
article > h1 {width: 100%;padding: 10px;border-bottom: 1px solid #000;
}
</style>