Bootstrap 5滚动监听需同时设置data-bs-spy="scroll"和data-bs-target，目标元素须有足够高度，offset值影响触发时机，iOS Safari需禁用overflow-anchor，SPA中需dispose后重建。
滚动监听依赖 data-bs-spy 和 data-bs-target 必须同时存在
Bootstrap 5 的滚动监听（Scrollspy）不是靠 JS 主动调用启动的，而是靠 DOM 属性自动激活。漏掉任一属性，scrollspy 就完全不工作，页面不会高亮导航项，也不会触发任何行为。
-
data-bs-spy="scroll"要加在滚动容器上（通常是<body>或某个带overflow-y: auto的元素） -
data-bs-target必须指向一个包含可点击锚点的导航容器，比如#navbar，且该容器内<a>标签的href必须匹配页面中对应id（如href="#section1"对应<div id="section1">） - 目标区域（
id对应的元素）必须有足够高度，否则无法触发“进入视口”判断；常见坑是 section 高度为0或仅靠内容撑开但内容太少
offset 参数决定触发高亮的时机，不是像素值越小越灵敏
默认 offset 是 10，单位是像素——但它不是从顶部开始算，而是从滚动容器顶部减去这个值后，才开始计算目标元素是否“到达”。实际效果是：增大 offset 会让高亮提前（更早触发），减小反而可能延迟甚至失效。
- 设为
data-bs-offset="80"常用于避开固定头部（fixed navbar），让锚点在距离顶部 80px 时就激活 - 若页面有多个 sticky 元素叠加（如 header + toolbar），
offset得手动累加，不能只看最上面那个 - 该值不支持响应式写法（如
sm:60），必须 JS 动态重置，否则在小屏下容易错位
手动初始化失败？检查 scrollspy 是否被重复绑定或 DOM 未就绪
用 new bootstrap.ScrollSpy() 手动调用时，报 Cannot read property 'top' of null 或无反应，大概率是目标元素还没挂载到 DOM，或 target 选择器找不到有效节点。
- 确保 JS 执行时，所有
id对应的 section 已存在于 HTML 中（不要等 Vue/React 异步渲染完再 init） - 避免对同一容器多次实例化：
new bootstrap.ScrollSpy(el, opts)不会自动销毁旧实例，重复调用会导致监听错乱 - 如果用在 SPA 路由切换后，需先调用
dispose()再重建，否则旧监听仍残留 - 示例正确写法：
const spy = new bootstrap.ScrollSpy(document.body, { target: '#navbar', offset: 80 })
滚动监听在 iOS Safari 上失效？和 overflow-anchor 及 position: sticky 冲突有关
iOS 15+ Safari 对滚动锚点（scroll anchoring）做了强化，默认开启 overflow-anchor: auto，会干扰 Scrollspy 的位置计算，导致高亮滞后、跳变或卡死。
- 临时关闭：给滚动容器加 CSS
overflow-anchor: none（仅限 iOS 需要） - 如果导航栏用了
position: sticky，确保其父容器没有transform、filter或will-change，否则会创建新层叠上下文，破坏 scrollspy 的 offset 计算 - 安卓 Chrome 一般没问题，但某些国产浏览器（如 UC、QQ 浏览器）可能禁用 scroll event，需 fallback 到
IntersectionObserver自行实现
