Demo of Scroll-Snapping

Scroll Snap Type

Apply to the scrolling container

• creates a scroll-snapping context
• required axis: [ x | y | block | inline | both ]
• optional strictness: [ *proximity | mandatory ]
• Use on html for viewport scrolling

Scroll Snap Align

Apply to any scrolled elements

• creates a scroll-snapping target
• keywords: [ none | start | end | center ]{1,2}

Scroll Padding

Apply to the scrolling container

• narrows the available scroll-window
• same syntax as padding
• works for all scroll-to actions, not just snapping

Scroll Margin

Apply to any scrolled elements

• offset target from available scroll-window
• same syntax as margin
• works for all scroll-to actions, not just snapping

Scroll Snap Stop

Apply to any scrolled elements

• optionally stop inertial scrolling
• keywords: [ normal | always ]
• works for all scroll-to actions, not just snapping

page 6

page 7

page 8

page 9

page 10

page 12