Summary

  • W3C 2015 年首份《CSS Scroll Snap Points》公开草案，以相册和不精确滑动为例，提出滚动容器可以停下的停靠点。
  • 后续草案把“停靠有多坚决”交给容器，把“哪一条边要对齐”交给内容元素；浏览器执行滚动并选定最终落点。

编辑排好一组现场照片。大屏上每张都端端正正，手机窗口却只能露出一张的一部分。读者拇指拨动，松手时正好卡在两张之间。若用左右箭头把翻页全部接管，相册就像每张照片前都站了一个管理员。另一条路是告诉浏览器哪里值得停下，让读者仍能自然地划动。Scroll Snap 走的是后一条路。

2015 年 3 月 26 日的首份公开草案开篇就写相册。触屏滑动和鼠标滚轮的落点并不精确，视口可能留下一张被切开的页面。文件提出停靠点：一次滚动结束后，容器的可见窗口可以落在这些偏移位置。mandatory 要求在条件允许时停在点上，proximity 则让浏览器衡量是否靠近得值得吸附。草案既有沿轴重复排列的点，也有元素自身提供的位置。编辑画车位，浏览器来泊车。

真正难办的地方出现在工作组会议里。2015 年 12 月的 W3C 会议记录记下 Matt Rakow 正把“区域”和“对齐”并入草案，工作组决定以 padding 取代旧的 destination，以 align 和 area 取代单一 coordinate。2016 年旧金山会议又要处理比窗口还大的照片、看不见的目标和根本到不了的停靠区域。尺子上能画出一条完美刻度，不代表读者眼前真能看到那张照片。

2016 年 6 月 23 日草案把“对齐”推到中心。容器用 scroll-snap-type 决定停靠方式，照片等子元素用 scroll-snap-align 指出哪条边或中心要与停靠窗口相遇。这样，一张照片可以说“请把我放在正中”，却不必让网站逐帧计算手指速度。草案把具体运动和物理效果留给浏览器；它还用长页面说明 proximity 的价值：读者有时要在段落中间停一会儿，强制每次跳到标记处的页面会像过分热情的导游。

到2018 年 8 月 14 日的候选推荐快照，容器与元素的职责通过 scroll-snap-type、scroll-snap-align、scroll-padding 和 scroll-margin 等属性更细地写出。内边距和外边距可以调整实际对齐的框，例如给固定页头下方留出空间。网站决定什么位置看起来舒服，不必自己造一台跟踪每次滑动的滚动机。

2021 年 3 月 11 日的候选推荐快照延续这套办法，继续说明浏览器怎样从可用位置中选择落点。读者发起滚动，样式表提供候选位置，浏览器完成动作。短相册可能适合较坚决的停靠；长文档若需要在任意段落驻足，就应认真看 proximity 的效果。对齐不是把手指从读者身上收走，而是给视线找一张完整的照片。

W3C 的发布历史列出 2015、2016、2018、2021 年的节点。这篇讲的是一次主动滚动之后该在哪里停；另一篇 Scroll Anchoring 讨论的是上方内容突然插入时如何保住读者的位置。相册的问题更好懂：编辑摆好照片，读者翻页，浏览器别把车横停在两个画框之间。