scroll-padding 作用于滚动容器，用于避免锚点跳转后目标内容被遮挡；需在实际滚动元素（如 .scroll-container）上设置 scroll-padding-top，而非 body 或目标元素，且容器须有溢出和块级格式化上下文。
scroll-padding 作用于滚动容器而非目标元素
局部滚动（比如一个 div 设置了 overflow-y: auto）下，想让锚点跳转后目标内容不顶着容器顶部被遮挡，不能对目标元素设 scroll-margin-top——它只影响该元素在视口中的对齐位置，而局部滚动的“视口”是那个带滚动条的容器本身。真正该加内边距的是这个容器，用 scroll-padding-top 告诉浏览器：“别把内容停在容器顶部，留出空间”。
必须给滚动容器显式设置 scroll-padding
常见错误是只写 html 或 body 的 scroll-padding，这对局部滚动完全无效。你需要定位到实际发生滚动的元素，比如：
- 一个 class 为
scroll-container的div，就要写.scroll-container { scroll-padding-top: 64px; } - 如果容器高度固定且设置了
overflow: auto，scroll-padding才会生效；没有溢出时该属性被忽略 - 滚动容器需有明确的块级格式化上下文（例如
display: block），flex 或 grid 子项中若未设宽高可能不触发滚动
scroll-padding 和 scroll-margin 的优先级关系
当滚动容器和目标元素同时设置了 scroll-padding-top 和 scroll-margin-top，浏览器以 scroll-padding 为准——它是滚动上下文级别的配置，优先级更高。这意味着：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 即使目标元素写了
scroll-margin-top: 100px，只要容器设了scroll-padding-top: 64px，最终偏移就是 64px - 若容器未设
scroll-padding，才退回到目标元素的scroll-margin -
scroll-padding不继承，也不能用通配符批量设置，每个滚动容器都得单独声明
兼容性与调试要点
scroll-padding 在 Chrome 89+、Firefox 90+、Safari 15.4+ 支持良好，但旧版 Safari（如 iOS 15.2）可能部分失效。调试时注意：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查滚动容器是否被识别为 “scroll container”（Elements 面板中右键 → Scroll into view 可验证）
- 确保目标元素有
id，且锚点链接 href 指向正确，例如<a href="#section2"></a>对应<h2 id="section2"></h2> - 不要混用
scroll-behavior: smooth和 JS 滚动动画，可能造成偏移计算冲突
局部滚动的内边距控制本质是滚动上下文的配置问题，不是样式叠加，最容易被忽略的是：你得亲手找到并选中那个带滚动条的容器，然后给它加 scroll-padding，而不是改 body 或目标元素。
