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 中目标元素后微调对齐的效果。这种方法简单易懂，能够满足大多数场景的需求。虽然可能存在性能方面的影响，但在大多数情况下，这种影响可以忽略不计。在实际应用中，可以根据具体情况选择合适的解决方案。
微信扫一扫 
支付宝扫一扫 
