scroll-behavior: smooth必须作用于有明确高度和overflow-y:auto的可滚动容器（如.scroll-container），而非html或body；目标元素需在该容器dom子树中且可见；配合scroll-margin-top防遮挡，兼容性差时fallback至scrollintoview。
scroll-behavior必须写在可滚动容器上，不是html
局部平滑滚动不能靠html { scroll-behavior: smooth; }——它只管整个页面。真正起作用的是那个带overflow: auto或overflow-y: scroll的容器，比如.scroll-container或tbody（需额外样式处理）。
常见错误是把scroll-behavior: smooth加在body或table上：前者无效，后者根本不可滚动，浏览器直接忽略。
- 必须确保容器有明确高度（如
height: 300px）和overflow-y: auto - 检查 DevTools 的 Elements 面板，确认滚动条确实出现在该元素上，而不是父级
- 若用
display: block强行让tbody可滚动，需同步设display: table-row-group维持语义，否则 Safari 可能错位
锚点跳转失效？先看目标是否在滚动容器内
scroll-behavior: smooth只对「容器内部的锚点」生效，且目标元素（如tr[id="row-42"]）必须真实存在于该容器 DOM 子树中。href="#row-42" 若指向容器外的元素，或目标被display: none、visibility: hidden隐藏，滚动会静默失败或跳到顶部。
- 动态渲染场景（React/Vue）中，确保
id在组件挂载后已写入 DOM，别在数据加载前就点击链接 - 不要用
name属性替代id，scroll-behavior完全不识别name - 微前端或 iframe 嵌套时，确认当前
document上下文正确，document.querySelector('html')可能不是真实根节点
固定表头遮挡内容？用scroll-margin-top，别手算offset
局部滚动容器里若有position: sticky表头，scrollIntoView({ behavior: 'smooth' })或锚点跳转后，目标行顶部常被盖住。这不是滚动不准，而是浏览器默认将目标顶部对齐容器顶部。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
解决方案是给目标元素加scroll-margin-top：
tr[id] { scroll-margin-top: 60px; }
- 值建议等于表头实际高度；响应式可用
clamp(40px, 6vh, 72px) - 这个属性只对锚点跳转和
scrollIntoView()生效，对scrollTo()无效 - 别误用
scroll-padding-top——它作用于整个视口，加在局部容器上反而导致定位偏移
Safari 和旧 WebView 兼容性差？fallback 到 scrollIntoView
局部scroll-behavior在 iOS Safari ≤15.4、部分安卓 WebView 中支持不稳定，尤其在tbody或嵌套滚动场景下容易降级为瞬移。更可靠的方式是主动调用 JS：
document.getElementById('row-42').scrollIntoView({ behavior: 'smooth', block: 'center' });
- 执行前务必判空：
if (el) el.scrollIntoView(...)，否则静默失败 -
block: 'center'比'start'更防遮挡，但若容器本身高度不足，可能触发意外滚动 - 检测支持性：
'scrollBehavior' in document.documentElement.style，不支持时 fallback 到scrollTop = el.offsetTop - container.scrollTop+requestAnimationFrame
局部滚动的平滑性不取决于“开了没开”，而取决于滚动上下文是否干净、目标是否稳定可见、以及 Safari 是否悄悄绕过了你的 CSS。哪怕只漏掉一个display: block或一个scroll-margin-top，效果就会断在用户眼前。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
