scroll-padding 是 css 属性，须写在滚动容器的 css 中，配合 scroll-snap-type 和 scroll-snap-align 才生效；常见错误是单独使用或误写在 html 标签里。
scroll-padding 不是 HTML 属性，不能写在 HTML 标签里——比如 scroll-padding="20px" 或 scroll-padding-top="64px" 直接加在 <section id="faq"></section> 上，浏览器完全忽略。
scroll-padding 必须写在滚动容器的 CSS 中
它只对「有滚动行为的容器」生效，且必须配合 scroll-snap-type 和 scroll-snap-align 才起作用。常见错误就是只写 scroll-padding 却漏掉这两个关键条件。
- 滚动容器需有明确的滚动上下文：比如
overflow-y: auto或overflow: scroll，且内容实际溢出容器高度/宽度 - 父容器（滚动容器）必须设置
scroll-snap-type: y mandatory（垂直强制吸附）或x mandatory（水平） - 每个要吸附的子元素（如
<section></section>）必须设置scroll-snap-align: start（或end、center） -
scroll-padding写在该父容器的 CSS 规则里，不是目标元素上
固定头部遮挡时，别写在 body 上，优先用 html
页面顶部有 position: fixed 导航栏（高 64px），点击 #faq 跳转后标题被盖住？这时该设 scroll-padding-top，但位置很关键：
- ✅ 推荐：
html { scroll-padding-top: 64px; }—— 因为多数浏览器的根滚动容器是html元素 - ❌ 避免：
body { scroll-padding-top: 64px; }——body的scroll-padding在多数浏览器中不被识别 - 如果导航栏高度响应式变化，可用 CSS 自定义属性联动：
html { scroll-padding-top: var(--header-height); } - 值支持
px、rem、vh，但不要用%—— 行为未定义，可能失效
scroll-padding 的值是逻辑方向，不是物理方向
它按 writing-mode 和 direction 动态映射，不是简单“上右下左”。例如：
-
scroll-padding: 10px 20px→ 块轴（block）10px（上下），内联轴（inline）20px（左右） -
scroll-padding: 5px 10px 15px 20px→ 顺序是block-start inline-end block-end inline-start，即「上→右→下→左」仅在writing-mode: horizontal-tb; direction: ltr下成立 - 若用了
writing-mode: vertical-rl或direction: rtl，scroll-padding-top可能完全不生效；此时应改用scroll-padding-block-start或scroll-padding-inline-start - 单值写法最安全：
scroll-padding: 20px四边统一，逻辑方向自动适配
scroll-padding 和 scroll-margin 同时存在会叠加
如果你既在滚动容器上写了 scroll-padding-top: 64px，又在目标元素上写了 scroll-margin-top: 20px，最终偏移是 84px —— 这常导致过度上移、留白过大。
- 通常只需其一：
scroll-padding-top控制全局锚点跳转偏移（推荐用于固定头场景） -
scroll-margin-top更适合单个元素微调（比如某节需要额外呼吸感） - 两者都设时，注意检查是否真需要叠加；调试时可临时注释掉一个来验证效果
-
scroll-padding对Element.scrollIntoView({ block: 'start' })和#:id跳转生效，但对block: 'center'无效
最容易被忽略的一点：scroll-padding 不是“让元素离顶部远一点”的通用样式，它是滚动吸附机制里的精密调节部件。没配 scroll-snap-type 和 scroll-snap-align，它就是一段被浏览器静默丢弃的 CSS 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
