scroll-padding 必须写在实际滚动容器的 CSS 中，如 html { scroll-padding-top: 64px; scroll-snap-type: y mandatory; }，并配合子元素的 scroll-snap-align: start，且需确保容器具有可滚动上下文。
scroll-padding 必须写在滚动容器的 CSS 里，不是 HTML 属性
直接在 HTML 标签上加 scroll-padding-top="64px" 或类似写法完全无效——浏览器根本不解析这个属性。它只接受 CSS 规则，且必须作用于**实际发生滚动的容器元素**。
常见错误场景：
- 把
scroll-padding-top: 64px写在<section id="faq">上 → 无效，该属性不能写在目标子元素上 - 写在
body上却没效果 → 多数浏览器的根滚动容器是html元素，body的scroll-padding常被忽略 - 写了但没看到偏移 → 很可能漏了
scroll-snap-type和scroll-snap-align这两个必要配套声明
scroll-padding 和 scroll-snap-type 必须成对出现才生效
scroll-padding 不是“设置了就起作用”的独立样式；它是滚动吸附（scroll snapping）机制的一部分，必须和 scroll-snap-type（在容器上）与 scroll-snap-align（在子元素上）一起用。
典型配置示例：
立即学习“前端免费学习笔记（深入）”；
html {
scroll-padding-top: 64px;
scroll-snap-type: y mandatory;
}
section {
scroll-snap-align: start;
}
关键点：
-
scroll-snap-type: y mandatory必须设在有滚动行为的容器上（如html、main或自定义div.scroll-container） -
scroll-snap-align: start要设在每个希望被吸附的目标子元素上（比如section、h2） - 容器需有可滚动上下文：例如
html默认可滚动，但若项目中重置了html { overflow: hidden }，就会彻底禁用scroll-padding
scroll-padding-top 在固定导航栏下怎么设才不遮挡标题
当页面顶部有 position: fixed 导航栏（高 64px）时，锚点跳转后目标元素常被盖住。此时最稳妥的做法是：
- ✅ 写在
html上：html { scroll-padding-top: 64px; } - ✅ 若导航栏高度响应式变化，用 CSS 自定义属性联动：
html { scroll-padding-top: var(--nav-height); }，再配合@media更新--nav-height - ✅ 支持安全区（如 iPhone 刘海）：
scroll-padding-top: calc(64px + env(safe-area-inset-top)); - ❌ 避免只靠
scroll-margin-top单独补 —— 它作用于单个元素，而scroll-padding-top是全局滚动容器级补偿，更统一、更少干扰
注意：scroll-padding 的值不支持 % 单位，行为未定义；推荐用 px、rem 或 vh。
scroll-padding 的方向是逻辑方向，不是物理方向
scroll-padding-top 这类“物理方向”属性在 writing-mode: vertical-rl 或 direction: rtl 下可能失效。真正可靠的是逻辑方向写法：
-
scroll-padding-block-start（代替scroll-padding-top） -
scroll-padding-inline-start（代替scroll-padding-left） - 单值写法最省心：
scroll-padding: 20px→ 四边统一，自动适配逻辑流向
Firefox 目前不支持 scroll-padding-block 等逻辑缩写，建议生产环境优先使用 scroll-padding-top / scroll-padding-bottom 等明确物理名，再辅以媒体查询或 JS 动态 fallback。
最容易被忽略的一点：即使所有 CSS 都写对了，只要父容器（比如某个包裹 main 的 div）设置了 overflow: hidden，整个滚动吸附链就断了——scroll-padding 会静默失效，连报错都没有。
