scrollIntoView 默认不平滑因 behavior: "auto" 硬跳，需显式传 { behavior: "smooth" }；注意兼容性（IE 不支持，Safari ≤15.4 不稳定）；局部滚动容器需用 scrollTo 并手动计算偏移；锚点跳转需 html { scroll-behavior: smooth }；无原生结束回调，推荐 IntersectionObserver 监听视口。
scrollIntoView 为什么滚动不平滑
默认调用 element.scrollIntoView() 会瞬间跳转，没有过渡动画。这是因为浏览器使用了默认的 behavior: "auto" 行为，等价于硬跳，尤其在移动端或长页面中体验割裂。
必须显式传入 { behavior: "smooth" } 才能启用 CSS 滚动行为。但要注意：该选项不是所有旧版浏览器都支持（如 IE 完全不支持，Safari ≤ 15.4 对 scrollIntoView 的 smooth 支持不稳定）。
- 推荐写法：
element.scrollIntoView({ behavior: "smooth", block: "start" }) -
block控制垂直对齐方式："start"（顶部对齐）、"center"（居中）、"end"（底部），避免默认值在不同浏览器中表现不一致 - 若目标元素是
position: fixed或被transform影响，可能触发滚动容器错位，此时应确保滚动上下文正确（见下一条）
滚动容器不是 document 怎么办
当目标元素位于一个带 overflow: auto 或 overflow-y: scroll 的父容器内（比如侧边菜单、卡片列表、模态框），直接调用 scrollIntoView 会作用于整个页面，而非局部容器。
解决方法是：对滚动容器本身调用 scrollTo，并手动计算目标元素相对于容器的偏移量。
立即学习“前端免费学习笔记（深入）”；
- 先获取容器：
const container = document.querySelector(".scroll-container") - 再获取目标位置：
const target = document.querySelector("#section-2") - 计算偏移：
const offsetTop = target.offsetTop - container.offsetTop（仅适用于无 transform / padding 干扰的简单布局） - 更健壮写法：
container.scrollTo({ top: target.offsetTop - container.offsetTop, behavior: "smooth" }) - 注意：如果容器用了
padding或border，需用getBoundingClientRect()和container.getBoundingClientRect()做相对坐标差值计算
锚点链接点击后不平滑？检查 CSS scroll-behavior
纯 HTML 锚点跳转（如 <a href="#section-2">跳转</a>）默认也不平滑。想全局开启，只需一行 CSS：
html {
scroll-behavior: smooth;
}这条规则必须写在 html 元素上（不能只写 body），且仅对符合规范的 fragment 导航生效（即 href 以 # 开头、对应页面内存在 id 匹配的元素）。
- 兼容性：Chrome 61+、Firefox 36+、Edge 79+、Safari 15.4+（iOS Safari 15.4+）
- 如果页面用了前端路由（如 React Router），
scroll-behavior: smooth不会自动触发，需在路由切换后手动调用scrollTo或scrollIntoView - 禁用时可临时覆盖：
html { scroll-behavior: auto !important; }，适合调试阶段快速比对
滚动中途被用户中断，回调怎么监听
原生 API 没有提供 onScrollEnd 回调。所谓“滚动结束”只能靠防抖检测 scroll 事件是否停止触发。
但更实际的做法是：别等结束，而是关注滚动是否“到达预期位置”。因为用户可能中途拖拽、缩放页面、甚至切到其他 tab，导致目标不可见或坐标偏移。
- 不要依赖
setTimeout硬等 500ms，改用IntersectionObserver监听目标是否进入视口 - 简单判断到位：
Math.abs(container.scrollTop - target.offsetTop) < 2（允许 2px 误差） - 若需精确控制（比如滚动后聚焦输入框），应在
scroll事件里加requestAnimationFrame节流，并持续校验位置，直到稳定 - 注意：
scroll-behavior: smooth触发的滚动，scroll事件仍会正常触发，只是频率更高；而scrollIntoView({ behavior: "smooth" })在部分 Safari 版本中可能不触发scroll事件，得用setTimeoutfallback
平滑滚动看着简单，真正落地时最容易卡在容器上下文错位、浏览器兼容性兜底、以及用户主动干预后的状态同步——这三处不细看控制台，问题往往藏得挺深。
