<p>Bootstrap 5 Scrollspy 要求导航栏必须有唯一 ID，data-bs-target 必须精确匹配该 ID（如 #main-nav），不支持类选择器或标签名；nav-link 的 href 必须以 # 开头且与目标元素 id 逐字符一致；固定导航栏需配 data-bs-offset 和 html { scroll-behavior: smooth; }；iOS Safari 需设 overflow-anchor: none 避免高亮错位。</p>
导航栏必须带 id，且 data-bs-target 要精确匹配
Scrollspy 不会自己猜你用的是哪个导航栏——它只认 data-bs-target 指向的 DOM 节点。如果你的导航栏是 <nav id="main-nav"></nav>，那滚动容器上必须写 data-bs-target="#main-nav"，不能写成 .navbar 或 nav（Bootstrap 5 不支持类选择器或标签名作为 target）。JS 初始化时同理：target: document.querySelector('#main-nav') 是唯一有效写法。
nav-link 的 href 必须以 # 开头，且对应元素 id 完全一致
这是最常踩的坑：href 值和目标 id 必须逐字符相同，包括大小写、连字符、下划线。比如 href="#contact-us" 对应的是 <section id="contact-us">，而不是 <section id="contactUs"> 或 <section id="contact_us">。另外，href 不能是相对路径（如 ./#about）或完整 URL（如 https://example.com/#about），否则 Scrollspy 无法匹配。
固定定位导航栏必须配 data-bs-offset + CSS scroll-behavior
当导航栏用 fixed-top 或 position: fixed 时，滚动到锚点顶部会被遮挡。这时要两步走：
-
data-bs-offset="72"（数值填你导航栏实际像素高度）——仅影响 Scrollspy 判断“何时激活” -
html { scroll-behavior: smooth; }——让原生锚点跳转变平滑 - 如果用 JS 跳转（如
element.scrollIntoView()），得手动加偏移：{ block: 'start', behavior: 'smooth' }并在计算位置时减去 offset 值
iOS Safari 上导航高亮错位或卡死？关掉 overflow-anchor
iOS 15+ Safari 默认开启滚动锚点（overflow-anchor: auto），会干扰 Scrollspy 的位置计算，导致高亮滞后、跳变甚至不触发。解决方法很简单：给滚动容器（通常是 body 或自定义的 div.scroll-container）加上 CSS：
body {
overflow-anchor: none;
}
注意：这个样式只对 iOS Safari 有必要，其他浏览器可不加；如果导航栏用了 position: sticky，还要检查其父容器是否意外加了 transform 或 will-change——这些会创建新层叠上下文，破坏 offset 计算逻辑。
