scrollend事件是浏览器原生支持的滚动结束检测方案，Chrome 114+、Firefox 119+、Safari 17.4+已兼容，需检测支持、单次绑定、防重复触发并结合getBoundingClientRect做缩放与视口适配。

scrollend 事件是现代浏览器中真正能“等滚动彻底停稳再执行”的原生方案，比用 setTimeout 模拟更准、更省资源。但它不是万能开关，需结合场景配置才能发挥价值。

确认浏览器支持并设置基础监听

scrollend 目前已在 Chrome 114+、Firefox 119+、Safari 17.4+ 原生支持。使用前建议先检测：

• 直接监听：`window.addEventListener('scrollend', handler)` 是最简方式，无需额外库
• 避免全局污染：若只响应某次 scrollTo，应在补偿后立即 `removeEventListener`
• 不支持时自动降级：可用 scroll + 节流 + 静止判定（如 250ms 内 scrollTop 无变化）模拟

配合 scrollTo 实现目标对齐补偿

常见需求是滚动到某个元素后，因固定导航栏遮挡或字体加载偏移，导致目标没完全露出来。这时 scrollend 是校准时机：

• 先调用 `window.scrollTo({ top: el.offsetTop, behavior: 'smooth' })` 启动滚动
• 在 scrollend 回调里用 `el.getBoundingClientRect().top` 获取真实视口位置
• 计算偏差：`offset = rect.top - offsetTop`（例如 offsetTop = 64 表示留出导航栏高度）
• 仅当 `Math.abs(offset) > 2` 时执行 `window.scrollBy(0, offset)` 补偿，避免抖动

防重复触发与竞态干扰

scrollend 不会因 preventDefault()、iframe 卸载或连续 scrollTo 被跳过而触发，但用户手动干预仍可能打乱流程：

• 设标志位：在 scrollend 触发前，监听一次 `scroll` 事件，若中途有滚动就取消待执行的补偿
• 避免循环：不要在 scrollend 回调里再调用带 `behavior: 'smooth'` 的 scrollTo，否则可能再次触发 scrollend
• 单次绑定：每个滚动动作配一个独立 handler，用闭包保存对应元素和预期偏移，不共用同一回调

适配视觉视口与缩放场景

在页面被缩放或使用视觉视口（如 iOS Safari 地址栏收起）时，document.scrollingElement 可能不反映真实滚动源：

• 优先监听 `window`，它能捕获包括视觉视口在内的所有滚动结束信号
• 若需精确到某容器（如 modal 内部滚动），直接在该元素上监听 `scrollend`，而非 window
• 缩放导致的布局偏移，可在 scrollend 中重新计算 `getBoundingClientRect()`，它已包含当前缩放状态