Bootstrap滚动监听需data-bs-spy与data-bs-target配对使用，前者加于滚动容器（如body或scrollable div），后者须为唯一匹配导航父容器的CSS选择器（如#nav-menu）；锚点id须与href值严格一致（含#），导航结构须为，且href必须以#开头指向真实ID；启用smooth scrolling时应改用scroll-margin-top替代data-bs-offset，并在DOM变动后调用refresh()刷新位置缓存。
滚动监听需要 data-bs-spy 和 data-bs-target 配合使用
Bootstrap 的滚动监听（Scrollspy）不是靠 JS 主动调用某个函数启动的，而是通过在 或容器上加 data-bs-spy="scroll" 触发，再配合 data-bs-target 指向导航菜单的 ID。如果只加了 data-bs-spy 却没配对 data-bs-target，监听完全不会生效。
常见错误是把 data-bs-target 写成类名（如 #nav-menu 对应的是 <ul id="nav-menu"></ul>），但实际写了 .nav-menu —— 这会导致 Bootstrap 找不到目标元素，控制台无报错，但高亮始终不切换。
-
data-bs-spy必须加在滚动容器上：通常是，若监听区域是某个<div class="scrollable">，就得加在该 div 上 <li> <code>data-bs-target值必须是 CSS 选择器，且能唯一匹配到包含导航项的父容器（如#navbar） - 被监听的锚点元素（
<section id="home"></section>）必须有id，且该id要和导航中<a href="#home"></a>的href值严格一致（含 #） - 确保每个
<a></a>的href是形如#features、#pricing的片段标识符 - 对应的内容区块（
<div id="features">）需在 DOM 中存在，且高度足够（太矮可能触发不了“进入视口”判定） <li>如果导航是用 JavaScript 动态生成的，要在 DOM 插入完成后手动调用 <code>bootstrap.ScrollSpy实例刷新，否则初始状态可能错乱 - 推荐方案：禁用
scroll-behavior: smooth，改用 Bootstrap 自带的 scroll-margin-top（作用于目标 section） - 例如给
<section id="about"></section>加样式：scroll-margin-top: 80px，这样浏览器原生滚动会自动留白，Scrollspy 计算更准 -
data-bs-offset数值建议设为固定导航栏高度（像素值），不要用vh或百分比单位 - 刷新时机建议放在
DOMContentLoaded后、以及所有异步内容插入完成之后 - 避免高频调用（如
scroll事件里直接refresh()），容易卡顿；可加throttle或用 ResizeObserver 监听容器变化 - 如果用 jQuery 版 Bootstrap 4，对应方法是
$().scrollspy('refresh')，注意版本差异
导航项必须用 <li><a></a></li> 结构，且 href 指向页面内 ID
Bootstrap Scrollspy 会自动给当前活跃的导航项添加 active 类，但它只识别标准结构：<ul><li><a href="#section1">Section 1</a></li></ul>。如果用了 <div class="nav"><a> 或 <code><nav><a></a></nav> 而非嵌套在 <li> 中，active 类大概率不会加到正确位置，甚至完全不出现。
另外，href 值必须以 # 开头并对应真实存在的元素 ID；写成 href="section1" 或 href="/#section1" 都不行。
offset 和 smooth scrolling 冲突时，滚动高亮会偏移
Scrollspy 默认判断“哪个 section 在顶部”是基于元素上边缘距离 viewport 顶部的距离。如果你启用了平滑滚动（比如用 scroll-behavior: smooth 或 JS element.scrollIntoView({ behavior: 'smooth' })），而同时设置了 data-bs-offset="80"（常见于固定头部场景），就可能出现高亮提前或延后切换的问题——因为平滑滚动过程中，元素位置是动态变化的，Scrollspy 的节流检测可能采样到中间态。
初始化后无法更新监听范围？试试 refresh() 方法
当页面内容动态增删（比如用 AJAX 加载新章节）、或者窗口尺寸大幅变化（如移动端横竖屏切换）后，Scrollspy 可能仍沿用旧的元素位置缓存，导致高亮错位。这时不能靠重写 HTML 属性，得手动触发刷新。
获取 Scrollspy 实例的方式取决于初始化方式：如果是 data 属性自动初始化，可用 bootstrap.ScrollSpy.getInstance(element)；如果 JS 手动 new，就保留实例引用。调用 .refresh() 会重新计算所有目标元素的 offset。
href、内容区块的 id、CSS 的 scroll-margin-top、JS 的 refresh() 时机——漏掉任意一环，高亮就会“看起来差不多，但总差那么一点”。
