scroll-snap-align 仅决定子元素哪一部分对齐滚动容器捕捉线，不控制偏移量；真正影响精度的是其与 scroll-margin、scroll-padding 的组合及盒模型尺寸。
scroll-snap-align 本身不直接控制“盒模型”的偏移量，它只决定子元素哪个边缘或中心对齐滚动容器的捕捉线。真正影响停止位置精度的，是它和 scroll-margin、scroll-padding 的组合，以及盒模型本身的尺寸与布局上下文。
scroll-snap-align 只管对齐基准，不管偏移距离
scroll-snap-align: start 意味着元素的“起始边缘”（左/上）对齐容器的起始捕捉线；center 是元素中心对齐；end 是结束边缘（右/下）对齐。但这个“起始边缘”具体落在哪——取决于该元素自身的 margin、border、padding 和父容器的 scroll-padding。
常见误解是以为设了 scroll-snap-align: center 就一定居中显示，结果发现内容被截断或留白过多。这是因为：
- 元素自身有
margin-top: 20px，它的“起始边缘”实际在视口上方 20px 处 - 滚动容器设置了
scroll-padding-top: 40px，捕捉线被整体下移 - 元素内部有
border-bottom: 8px solid，但scroll-snap-align不感知 border，只认盒模型的几何边界
用 scroll-margin 调整单个子元素的吸附锚点
当你想让某个 .section 停止时顶部离视口顶部留出 60px 空隙（比如避开固定导航栏），不能靠给它加 margin-top —— 那会撑开布局，影响其他元素。应该用 scroll-margin-top：
.section {
scroll-snap-align: start;
scroll-margin-top: 60px; /* 吸附时，该元素“起始边缘”对齐的位置上移 60px */
}
注意：scroll-margin 是“吸附锚点偏移”，不是视觉偏移。它改变的是该元素参与捕捉计算时的逻辑位置，不影响文档流。
关键限制：
-
scroll-margin不接受负值（如scroll-margin-top: -20px无效） - 它只作用于设置了
scroll-snap-align的子元素 - 如果同时设置了
margin-top和scroll-margin-top，两者叠加生效，但语义不同：前者推远兄弟元素，后者只改吸附位置
scroll-padding 影响整个容器的捕捉参考线
scroll-padding 定义的是滚动容器内“可视区域”的逻辑内边距。它把整个捕捉坐标系往里缩，相当于移动了所有 scroll-snap-align 对齐的目标线。
典型场景：顶部有 position: sticky 导航栏高 56px，你希望每个 .card 吸附时顶部刚好卡在导航栏下方：
.cards-container {
overflow-y: auto;
scroll-snap-type: y mandatory;
scroll-padding-top: 56px; /* 所有 start 对齐都基于此线 */
}
.card {
scroll-snap-align: start;
}
这里 scroll-padding-top 不是给容器加 padding，而是告诉浏览器：“别把视口顶部当对齐基准，往上抬 56px 才是真正的起始捕捉线”。
容易踩的坑：
- 在
position: fixed容器里设scroll-padding，Safari 可能忽略（iOS 16+ 修复，但旧版仍存在） -
scroll-padding和padding同时存在时，padding影响布局，scroll-padding只影响吸附，二者不冲突但需区分用途 - 不要用
scroll-padding替代scroll-margin：前者全局调整基准线，后者逐个微调元素锚点
负偏移需求？用占位元素绕过 scroll-margin 限制
当你要实现“吸附后内容顶部向下偏移 32px”（比如隐藏一个装饰性 SVG 边框），而 scroll-margin-top 又不支持负值时，scroll-snap-align 本身无解，必须引入辅助结构。
可靠做法是加一个绝对定位的空 <div> 作为真实吸附目标：<pre class="brush:php;toolbar:false;">.section {
position: relative;
}
.section::before {
content: "";
position: absolute;
top: 32px; /* 把吸附点下移到目标元素内部 */
left: 0;
width: 100%;
height: 1px;
scroll-snap-align: start;
}</pre>
<p>这样浏览器会把 <code>::before 的顶部（即 .section 内容区往下 32px 的位置）当作吸附锚点，从而让视觉内容自然露出。
比伪元素更稳妥的做法是显式插入一个空 div：
<div class="section"> <div class="snap-anchor" style="position: absolute; top: 32px; width: 1px; height: 1px; scroll-snap-align: start;"></div> <h2>标题</h2> <p>正文...</p> </div>
这种写法兼容性更好，且避免了伪元素在某些渲染路径下不参与滚动捕捉的问题。
真正难的不是写对属性，而是理解：浏览器计算吸附位置时，只看盒模型的几何边界和这些偏移声明，不看视觉渲染结果。任何依赖“看起来对齐了”的调试，都容易在缩放、字体加载、动态内容插入后失效。
