Scroll

Scroll Snap Type

Style syntax for setting how strictly snap points are enforced on the scroll container.

🚧This page is still under construction and some content may not be complete.

Overview [sr-only]

ClassDeclarations
scroll-snap-type:value / scroll-snap:valuescroll-snap-type: value
scroll-snap-type:value|value / scroll-snap:value|value`scroll-snap-type: value value
scroll-snap:xscroll-snap-type: x
scroll-snap:yscroll-snap-type: y
scroll-snap:bothscroll-snap-type: both
scroll-snap:blockscroll-snap-type: block
scroll-snap:inlinescroll-snap-type: inline
scroll-snap:x|mandatory
scroll-snap:y|proximity
scroll-snap:both|mandatory
scroll-snap-type:nonescroll-snap-type: none

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="scroll-snap-type:both:hover scroll-snap-type:both@sm scroll-snap-type:both@dark scroll-snap-type:both@print"></div>
PREVIOUS
Scroll Snap Stop

Style syntax for setting whether scroll container is pass over snap positions.

NEXT
Clip Path

Style syntax for creating a clipping region.

MIT License © Aoyue Design LLC.