本文旨在解决在使用 CSS Scroll Snap 功能时，如何使滚动捕捉位置略微偏移目标元素之后的问题。通过创建一个绝对定位的空 div 元素，并将其设置为滚动捕捉点，可以有效地实现对滚动捕捉位置的微调，从而隐藏特定视觉元素或达到其他设计目的。
在使用 CSS Scroll Snap 时，有时我们需要滚动捕捉的位置并不是目标元素的起始位置，而是略微偏移之后的位置。一个常见的场景是，当目标元素顶部存在一个装饰性的边框或其他视觉元素时，我们希望滚动捕捉的位置能够将其隐藏。虽然 scroll-margin-top 属性可以用来调整滚动捕捉的起始位置，但它通常用于将捕捉位置提前，以避免被固定定位的元素遮挡。如果需要将捕捉位置向后偏移，直接使用负的 scroll-margin-top 值通常无效。
一种有效的解决方案是创建一个空的 div 元素，并将其绝对定位在目标元素顶部所需偏移的位置。然后，将该 div 元素设置为滚动捕捉点。这样，滚动容器在滚动时，就会以这个 div 元素的位置作为捕捉点，从而实现目标元素后微调对齐的效果。
以下是具体的实现步骤：
立即学习“前端免费学习笔记（深入）”；
-
创建空的 div 元素： 在目标元素之前插入一个空的 div 元素。
<figure class="position-relative"> <div class="snap-div"></div> <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" class="snap"> <figcaption>Peace, Love and Samb</figcaption> <div class="bottom-divider"> <svg><use xlink:href="#divider-inf"></use></svg> </div> </figure> -
设置 div 元素的样式： 使用 CSS 将该 div 元素设置为绝对定位，并设置其 top 属性，以确定偏移量。同时，将其设置为滚动捕捉点。
.snap-div { position: absolute; top: 20px; /* 调整此值以控制偏移量 */ scroll-snap-align: start; scroll-snap-stop: always; }- position: absolute;：将 div 元素设置为绝对定位，使其相对于其最近的已定位祖先元素（在本例中是 figure 元素）进行定位。
- top: 20px;：设置 div 元素的顶部位置，使其相对于 figure 元素顶部偏移 20 像素。这个值决定了滚动捕捉位置的偏移量。
- scroll-snap-align: start;：指定滚动捕捉对齐方式为起始位置。
- scroll-snap-stop: always;：确保每次滚动都会捕捉到这个元素。
注意事项：
- 确保目标元素的父元素（例如，本例中的 figure 元素）具有 position: relative 或其他非 static 的定位属性，以便 div 元素可以相对于它进行定位。
- 根据实际需求调整 top 属性的值，以达到最佳的视觉效果。
- 这种方法通过创建一个额外的 DOM 元素来实现滚动捕捉位置的微调。虽然有效，但在某些情况下，可能会影响页面的性能。在性能敏感的场景中，需要权衡利弊。
总结：
通过创建一个绝对定位的空 div 元素，并将其设置为滚动捕捉点，我们可以有效地实现 CSS Scroll Snap 中目标元素后微调对齐的效果。这种方法简单易懂，能够满足大多数场景的需求。虽然可能存在性能方面的影响，但在大多数情况下，这种影响可以忽略不计。在实际应用中，可以根据具体情况选择合适的解决方案。
