CSS Scroll Snap: Chromium Implementation and Specification
Blink2865 Tammi

CSS Scroll Snap: Chromium Implementation and Specification

This documentation provides a comprehensive analysis of CSS Scroll Snap, specifically focusing on its technical implementation within Chromium’s Blink engine. It details how Level 1 specifications allow developers to create controlled, paginated scrolling by defining snap positions and alignment without custom scripts. The text explains the internal architecture, describing how the main thread and compositor thread collaborate to ensure smooth, high-performance animations across various input methods like touch and keyboard. It also addresses complex interoperability issues and edge cases, such as oversized elements and interactions with sticky positioning. Furthermore, the sources outline future Level 2 enhancements, including new JavaScript events and pseudo-classes designed to give authors more stylistic control over the active scroll state. Finally, the material emphasizes accessibility and UX best practices, warning that mandatory snapping can sometimes hinder usability if not tested thoroughly.

Jaksot(466)

cc::LayerImpl / PictureLayerImpl

cc::LayerImpl / PictureLayerImpl

Impl‑side layer objects that reference property‑tree nodes and emit draw quads from recorded paint (tiles).

22 Syys 202550min

cc::PropertyTrees

cc::PropertyTrees

(TransformTree / ClipTree / EffectTree / ScrollTree) with nodes cc::TransformNode / ClipNode / EffectNode / ScrollNode — The impl‑side property‑tree state that positions, clips, blends, and scrolls co...

22 Syys 202534min

cc::LayerTreeHostImpl

cc::LayerTreeHostImpl

The compositor‑thread twin that owns the active/pending trees, runs impl‑side animations/scroll, and prepares draw. Implements cc::InputHandler for threaded scrolling/pinch.

22 Syys 202546min

main —> impl cc::LayerTreeHost

main —> impl cc::LayerTreeHost

Packages updated layers/property trees; kicks a commit to the compositor thread (via the proxy).

22 Syys 202536min

blink::PropertyTreeManager

blink::PropertyTreeManager

Bridges Blink’s paint property trees into cc property trees: creates/updates cc TransformNode, ClipNode, EffectNode, and ScrollNode (including inner/outer viewport scroll nodes).

22 Syys 202539min

blink::PaintArtifactCompositor

blink::PaintArtifactCompositor

Decides what needs to be composited and prepares the main‑thread representation to feed cc (layers if needed, scrollbar compositing, etc.).

22 Syys 202542min

blink::PaintArtifact

blink::PaintArtifact

The immutable package of paint chunks + display items for this frame, used to drive compositing without re‑painting.

21 Syys 202536min

blink::TransformPaintPropertyNode / ClipPaintPropertyNode / EffectPaintPropertyNode / ScrollPaintPropertyNode

blink::TransformPaintPropertyNode / ClipPaintPropertyNode / EffectPaintPropertyNode / ScrollPaintPropertyNode

The paint property trees captured during painting (transform, clip, effect/opacity, scroll offset) that define visual & coordinate‑space state.

21 Syys 202541min