scroll-padding-top 是滚动容器上控制锚点滚动偏移的css属性，专用于避免固定头部遮挡目标元素，需设在html等滚动容器而非目标元素上，不参与布局计算。
scroll-padding-top 是什么，为什么不能用 padding-top 代替
scroll-padding-top 是 CSS 中专为滚动锚点（如 :target、scrollIntoView()）设计的偏移控制属性。它定义的是「滚动目标元素顶部到视口顶部的距离」，而不是元素自身的内边距。
很多人试图用 padding-top 模拟这个效果，结果发现：锚点跳转后内容被固定头部遮挡，或者触发多次重排 —— 因为 padding-top 改变的是元素盒模型，会影响布局流；而 scroll-padding-top 只影响滚动行为，不参与渲染计算。
-
scroll-padding-top必须写在滚动容器上（通常是html或带overflow: auto/scroll的祖先），不是目标元素上 - 它只对
scrollIntoView({ block: 'start' })、#:section-id跳转、Element.scrollIntoView()等原生滚动行为生效 - 不支持 IE，Edge 79+、Chrome 89+、Firefox 90+ 才稳定支持
怎么给固定头部留出安全距离
典型场景：页面顶部有 position: sticky 或 position: fixed 导航栏，高度 64px，点击目录跳转到 #faq 时，标题被遮住。
正确做法是把 scroll-padding-top 设置在根滚动容器上：
立即学习“前端免费学习笔记（深入）”；
html {
scroll-padding-top: 64px;
}
如果导航栏高度动态变化（比如响应式折叠），可以用 CSS 自定义属性联动：
:root {
--header-height: 64px;
}
html {
scroll-padding-top: var(--header-height);
}
- 不要写在
body上 —— 多数浏览器实际滚动容器是html，body的scroll-padding-top常被忽略 - 值可以是
px、rem、vh，但避免用百分比（%），它在该属性中无定义行为 - 若同时用了
scroll-margin-top（作用于目标元素），两者会叠加 —— 通常只需其一，优先用scroll-padding-top控制全局偏移
scroll-padding-top 不生效的常见原因
最常遇到的不是写错属性，而是滚动上下文没对上。下面这些情况会导致 scroll-padding-top 完全不触发：
- 目标元素不在当前滚动容器的子树里（比如跳转到 iframe 内的 id）
- 滚动容器没有显式设置
overflow（如overflow-y: auto），且内容未自然溢出 —— 此时浏览器不认为它是“可滚动容器” - 使用了
scrollIntoView({ block: 'center' })或inline参数，scroll-padding-top只响应block: 'start'和'end' - CSS 中存在
overscroll-behavior: none抑制了滚动传播，也会让偏移失效
调试建议：打开 DevTools → Elements → 选中 html 元素 → 在 Styles 面板确认 scroll-padding-top 是否被计算（Computed 标签页里搜 scroll-padding）。
和 scroll-margin-top 的关键区别在哪
scroll-margin-top 是加在**目标元素自身**上的，用于微调单个锚点的对齐位置；scroll-padding-top 是加在**滚动容器**上的，用于统一所有锚点的偏移基准。
例如，你有一个固定头 + 一个特殊卡片需要多留 20px 空间，可以这样组合：
html {
scroll-padding-top: 64px;
}
.card-special {
scroll-margin-top: 20px;
}
最终效果 = 64px（全局） + 20px（局部）。
-
scroll-margin-top支持负值，scroll-padding-top不推荐负值（可能引发不可预测的滚动抖动） - 当两者共存时，浏览器按「容器偏移 → 元素偏移」顺序叠加，不是覆盖关系
- 如果只处理固定头部遮挡，95% 场景只需
scroll-padding-top，scroll-margin-top属于进阶微调手段
真正容易被忽略的是：这个偏移只在滚动发生时起作用，不影响静态布局、打印样式或截图，也不改变 getBoundingClientRect() 的返回值 —— 它纯粹是滚动引擎内部的坐标修正逻辑。
