如何使用CSS实现滚动吸附位置略晚于目标元素起始位置？

之前方案失效的原因 #

• scroll-margin 相关属性在CSS规范中仅支持非负长度值，你设置的scroll-margin-top: -20px属于无效声明，会被浏览器直接丢弃
• <img>属于替换元素，本身不支持::before/::after伪元素渲染，同时绝对定位脱离正常文档流的元素无法作为有效滚动吸附锚点，所以伪元素方案完全不生效

可行实现方案 #

方案1：调整吸附元素盒模型（改动最小） #

不需要新增DOM元素，只需要把原来挂在<img>上的snap类移到外层<figure>标签上，通过盒模型调整把吸附对齐点下移20px，同时用负边距抵消布局偏移，不影响原有视觉效果。
首先修改HTML类挂载位置：

<figure class="position-relative snap">
   <div class="top-divider">
     <svg><use xlink:href="#divider-inf"></use></svg>
   </div>

   <img src="assets/img/hug/hug-3x2-lg.jpg" width="1200" height="800" alt="group hug">

   <figcaption>Peace, Love and Samb</figcaption>

   <div class="bottom-divider">
      <svg><use xlink:href="#divider-inf"></use></svg>
   </div>
</figure>

对应调整CSS：

.snap {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* 把吸附元素的border-box顶部上移20px，吸附时会自动对齐这个新的顶部位置 */
    padding-top: 20px;
    /* 负上外边距抵消padding带来的整体下移，保证原有排版位置不变 */
    margin-top: -20px;
}

/* 原有top-divider的绝对定位样式保留即可，不需要调整 */

实现逻辑：滚动吸附的start对齐规则是把吸附元素的border-box顶部和滚动容器可视区顶部对齐，我们通过padding把border-box的实际顶部往上挪了20px，配合负margin保证视觉位置不变的前提下，吸附对齐时元素顶部的20px波浪边刚好会被挡在可视区外，达到预期效果。

方案2：新增独立吸附锚点（无侵入性） #

如果不想改动原有<figure>的盒模型，可以在顶部波浪分隔线下方新增一个0高度的空元素作为专门的吸附锚点，把snap类挂在这个空元素上，完全不影响原有元素的样式和布局。
HTML修改：

<figure class="position-relative">
   <div class="top-divider">
     <svg><use xlink:href="#divider-inf"></use></svg>
   </div>
   <!-- 新增吸附锚点，位置刚好在波浪分隔线下沿 -->
   <div class="snap"></div>

   <img src="assets/img/hug/hug-3x2-lg.jpg" width="1200" height="800" alt="group hug">

   <figcaption>Peace, Love and Samb</figcaption>

   <div class="bottom-divider">
      <svg><use xlink:href="#divider-inf"></use></svg>
   </div>
</figure>

对应CSS：

.snap {
    height: 0;
    /* 锚点位置距离figure顶部20px，刚好是波浪边的高度 */
    margin-top: 20px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

注意：不要在滚动容器上设置scroll-padding-top，这个属性是给容器内所有吸附点统一加正向偏移用的，只适合处理固定导航栏遮挡内容的场景，没法实现单个吸附点向下偏移藏顶部内容的需求。

内容的提问来源于stack exchange，提问作者Sam Miller