scrollspy 仅自动为匹配的导航链接（如 .nav-link）添加 .active 类，不提供内置指示条样式；所有视觉反馈（如左侧竖线）需开发者用 css 配合 .active 类自行实现，关键包括设置 position: relative、使用 ::before 伪元素或 border-left、注意盒模型与兼容性问题。
Scrollspy 本身不提供“指示条”（如左侧竖线、底部横线、背景色块等）的 CSS 类或内置样式，所有视觉反馈都得靠你自己写 CSS 配合 .active 类实现。它只负责在导航项上加/删 .active，剩下的全是你的活。
Scrollspy 的 .active 类在哪生效？
Bootstrap 5 的 Scrollspy 只会向 data-bs-target 指向的导航容器内、匹配当前滚动位置的 .nav-link 或 .list-group-item 元素添加 .active 类。它不会动目标 section，也不会给导航父元素加类——只精准作用于那个“正在被看到”的链接元素。
- 如果你用的是
<ul class="nav"><li>@#@#@#@#@#@#@#@#@#@0</li></ul>，.active会加在@#@#@#@#@#@#@#@#@#@1，.active会加在<a></a>或<button></button>上（取决于你用什么标签） - 如果导航项没写
class="nav-link"或不在 Bootstrap 认可的选择器范围内（比如用了<span></span>），Scrollspy 就找不到它，.active永远不会出现
怎么用 CSS 做一个左侧指示条？
常见做法是利用 ::before 伪元素，在 .nav-link.active 左侧画一条竖线。关键点在于定位方式和高度控制：
- 必须给
.nav-link设position: relative，否则::before无法相对于它定位 -
::before用position: absolute; left: 0; top: 50%; transform: translateY(-50%)居中对齐文字 - 宽度和颜色按需设，比如
width: 4px; background: #0d6efd; - 别忘了加过渡：
transition: background 0.2s, opacity 0.2s;，否则切换生硬 - 如果导航是垂直排列（如侧边栏），更推荐用
border-left替代伪元素，更轻量且兼容性更好
nav .nav-link {
position: relative;
padding-left: 1.5rem;
}
nav .nav-link.active::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 1.2em;
background: #0d6efd;
}
为什么指示条位置偏移或错位？
绝大多数错位不是 Scrollspy 的问题，而是 CSS 盒模型或布局干扰导致的：
-
line-height和padding不一致会让::before的top: 50%失准；改用height: 100%+top: 0更稳 - 导航容器用了
display: flex但没设align-items: center，导致子项基线不齐，伪元素跟着偏 - 父级有
transform、perspective或filter，会创建新的层叠上下文，让position: absolute相对错误的祖先定位 - iOS Safari 下，若导航区域启用了
overflow-anchor: auto（默认），可能影响滚动锚点计算，间接导致.active切换时机不准，指示条“跳变” - 没重置
scroll-behavior: smooth的副作用：平滑滚动期间，.active可能提前或滞后更新，造成指示条短暂错位
SPA 中指示条不更新？检查 target 是否还活着
单页应用里，路由切换后旧的导航 DOM 节点常被销毁，但 Scrollspy 实例还在监听已不存在的 .nav-link。结果就是 .active 不再添加，指示条冻结。
- 每次路由进入新页面前，必须调用
scrollSpyInstance.dispose() - 新导航 DOM 挂载完成后（确保
.nav-link已在 document 中），再用new bootstrap.ScrollSpy(...)重建 - 不要用字符串 selector 当
target：JS 初始化时，target必须是真实存在的 DOM 节点，{ target: '#navbar' }❌，{ target: document.querySelector('#navbar') }✅ - 动态插入的导航项（比如从 API 加载菜单），要在插入后手动调用
scrollSpyInstance.refresh()，否则新项永远不会被识别
最常被忽略的一点：Scrollspy 的激活判断依赖 IntersectionObserver，而这个 API 在目标元素高度为 0 或未渲染完成时会直接跳过。所以哪怕 CSS 写得再漂亮，如果某个 section#contact 是空的、或者只靠 flex 布局撑高但内容还没加载完，对应的导航项就永远拿不到 .active——指示条自然也就停在上一个位置不动了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
