Bootstrap 5 ScrollSpy 无内置CSS，仅添加active类，高亮效果依赖覆盖.nav-link.active等默认样式；需用更高优先级选择器或!important；平滑滚动会导致样式滞后，移动端需确保容器可滚动且监听正常。

滚动监听器本身没有CSS类可直接定制

Bootstrap 5 的 ScrollSpy 是纯 JavaScript 行为，它只负责在滚动时自动给目标元素（如 <li>）添加 active 类，不生成任何额外 DOM 或内置样式。你看到的“高亮效果”完全来自 Bootstrap 自带的 .nav-link.active 或 .list-group-item.active 等已有规则——所以自定义样式，本质是覆盖这些已存在的 CSS 选择器。

必须用更高优先级选择器覆盖默认 active 样式

Bootstrap 的 .nav-link.active 默认是蓝色文字 + 下划线，但它的 CSS 优先级较高（比如用了 .nav-pills .nav-link.active）。直接写 .nav-link.active { color: red; } 很可能被忽略。

实操建议：

• 在引入 Bootstrap CSS 之后再加载你的自定义 CSS 文件
• 使用更具体的选择器，例如：

  .navbar-nav .nav-link.active {
    color: #2d6f9e !important;
    font-weight: 600;
    background-color: #f8f9fa;
    border-radius: 4px;
  }

• 避免过度依赖 !important；更稳妥的是复刻 Bootstrap 的层级，比如如果你的导航在 <div class="sidebar"> 内，就写 <code>.sidebar .nav-link.active
• 注意：active 类会同时加在导航项和对应内容区的 <section id="xxx"></section> 上（如果启用了 target 选项），但后者通常不需要样式，除非你希望高亮整个区块

滚动监听触发时机与平滑滚动冲突时样式会“滞后”

当你启用 scroll-behavior: smooth（常见于 html { scroll-behavior: smooth; }），浏览器滚动是渐进的，而 ScrollSpy 的 active 类是在滚动停止后才更新（或节流后更新），导致视觉上“高亮滞后于滚动位置”。这不是样式问题，而是行为同步问题。


CSS工具箱(专业版)
全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
下载

立即学习“前端免费学习笔记（深入）”；

解决思路：

• 禁用平滑滚动：html { scroll-behavior: auto; }（最简单，但牺牲体验）
• 手动调用 scrollSpy.update() 配合 scroll 事件（不推荐，性能差）
• 接受轻微滞后 —— 大多数用户感知不强；若必须精准，改用 Intersection Observer 手动实现监听，完全脱离 Bootstrap 的 ScrollSpy

移动端 touch 滚动下 active 类可能不及时更新

iOS Safari 和部分安卓 WebView 中，快速拖拽滚动可能跳过某些 scroll 事件，导致 active 类未及时切换。这不是 CSS 问题，但会影响你“样式是否生效”的判断。

关键点：

• 确保 data-bs-spy="scroll" 元素设置了明确的 height 和 overflow-y: auto（否则无法触发监听）
• 检查是否在容器上误加了 -webkit-overflow-scrolling: none（已废弃，会导致监听失效）
• 用 console.log 在 activate.bs.scrollspy 事件中验证是否触发：

  document.addEventListener('activate.bs.scrollspy', e => {
    console.log('now active:', e.target.getAttribute('href'));
  });

真正卡住人的地方，往往不是怎么写样式，而是没意识到 active 类根本没加上——先确认 JS 行为正常，再调样式。