scroll-padding 是 css 属性，非 html 属性，必须配合 scroll-snap-type 和 scroll-snap-align 在滚动容器上使用才生效，单独设置无效。
scroll-padding 不是 HTML 属性，是 CSS 属性。它必须写在 CSS 中，作用于设置了滚动行为的容器（比如 overflow: auto 或 overflow: scroll 的父元素），且只有配合 scroll-snap-align 和 scroll-snap-type 才能生效。
直接在 HTML 标签里加 scroll-padding="20px" 会完全无效——浏览器根本不认识这个 HTML 属性。
scroll-padding 必须搭配 scroll-snap 才起作用
很多开发者写了 scroll-padding-top: 60px 却没效果，根本原因是漏掉了两个必要条件：
- 父容器必须设置
scroll-snap-type（如scroll-snap-type: y mandatory） - 每个可吸附子元素必须设置
scroll-snap-align（如scroll-snap-align: start） - 父容器需有明确的滚动上下文（
overflow-y: auto/scroll，且内容高度超出容器）
缺一不可。单独写 scroll-padding 就像给门装了弹簧却没装门框——力无处作用。
scroll-padding 的值写法和方向对应关系
scroll-padding 支持单值到四值语法，但要注意：它的方向是逻辑方向（logical），不是物理方向。也就是说，scroll-padding: 10px 20px 30px 40px 按照 block-start inline-end block-end inline-start 顺序，而不是「上右下左」。
- 一个值：
scroll-padding: 10px→ 四边都为 10px - 两个值：
scroll-padding: 15px 25px→ 块轴（上下）15px，内联轴（左右）25px - 三个值：
scroll-padding: 10px 20px 30px→ 块起始（上）10px，内联（左右）20px，块结束（下）30px - 四个值：
scroll-padding: 5px 10px 15px 20px→ 块起始、内联结束、块结束、内联起始
如果你用了 writing-mode: vertical-rl 或 direction: rtl，scroll-padding-top 这类物理方向属性就可能失效——此时应优先用 scroll-padding-block-start 等逻辑方向变体。
scroll-padding-top 在固定导航栏场景下的典型误用
常见需求：页面有 position: fixed 的顶部导航栏（高 80px），滚动锚点（如 <a href="#section1"></a>）跳转后，目标元素被导航栏遮挡。这时想用 scroll-padding-top: 80px 来“上推”吸附位置。
- ✅ 正确做法：给
html或body设置scroll-padding-top: 80px，同时确保它们启用了scroll-snap-type（但注意：html元素默认不支持scroll-snap-type，推荐改用一个包裹容器） - ❌ 错误做法：只给目标
<section id="section1"></section>加scroll-padding-top——该属性只能作用于滚动容器，不能写在子元素上 - ⚠️ 注意：
scroll-behavior: smooth和scroll-padding-top可共存，但前者影响锚点跳转动画，后者只影响 snap 吸附位置；两者机制不同，别混为一谈
最稳妥的落地结构是：用一个 div.scroll-container 包住全部内容，设 overflow-y: auto、scroll-snap-type: y mandatory、scroll-padding-top: 80px，再让每个 section 设 scroll-snap-align: start。
真正容易被忽略的是：scroll-padding 的生效前提太苛刻——它不是「滚动偏移」的通用解法，而是 scroll-snap 生态里的专用调节器。如果没配齐 scroll-snap-type + scroll-snap-align，写十遍 scroll-padding 都不会动一下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
