2D 网格滚动，你还在靠 JavaScript 同步两个轴？今天 scroll-snap-type: pair 让 CSS 自己搞定

2D 网格或相册类布局里，往一个方向滚动后另一个轴的吸附位置经常「跑偏」——同一组内容的图片在 X 轴对齐了，caption 却对齐到了相邻组。这是 scroll-snap-type: both 的设计：两个轴独立选目标，不保证是同一个元素。

旧写法（both，X/Y 轴各自独立）

<div class="gallery" style="overflow: auto; scroll-snap-type: both;">
  <div class="item" style="scroll-snap-align: start;">
    <img src="1.jpg">
    <p class="caption">图片 1 说明</p>
  </div>
  <!-- caption 可能对齐到相邻 item 的图片 -->
</div>

新写法（pair，X/Y 轴锁定同一元素）

<div class="gallery" style="overflow: auto; scroll-snap-type: pair;">
  <div class="item" style="scroll-snap-align: start;">
    <img src="1.jpg">
    <p class="caption">图片 1 说明</p>
  </div>
  <!-- X/Y 轴同时吸附到同一个 .item，caption 不再错位 -->
</div>

差异在行为上：一屏展示一张卡片时，Y 轴滚到底看到的 caption 必定属于当前图片，而不是相邻图片的。原生实现，不需要 scroll 事件监听加锁。

/* 完整的 2D snap 配置 */
.gallery {
  overflow: auto;
  scroll-snap-type: pair block mandatory;
  /* 主轴 block（Y），从严 snap；pair 强制 X/Y 锁定同一目标 */
  scroll-padding: 16px;
}
.item {
  scroll-snap-align: start;
  scroll-margin: 8px;
}

Chrome 156 将随桌面和 Android 版本同步上线（预计 2026-10-07 正式发布）。Gecko（Firefox）尚未表态，WebKit（Safari）无信号。功能性测试建议用 @supports (scroll-snap-type: pair) 渐进增强：

.gallery { scroll-snap-type: both; }          /* 旧浏览器降级 */
@supports (scroll-snap-type: pair) {
  .gallery { scroll-snap-type: pair block mandatory; }
}

下一步：检查你现有的相册网格、卡片视图或任何双向滚动组件，把 scroll-snap-type: both 替换为 pair，删掉 JavaScript 里的 scroll 同步监听——如果有的话。