Syntax

Scroll Snap Type

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

ClassDeclarations
scroll-snap-type:valuescroll-snap-type: 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-type:x|mandatoryscroll-snap-type: x mandatory;
scroll-snap-type:y|proximityscroll-snap-type: y proximity;
scroll-snap-type:both|mandatoryscroll-snap-type: both mandatory;
scroll-snap-type:nonescroll-snap-type: none;

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="scroll-snap-type:both:hover scroll-snap-type:both@sm scroll-snap-type:both@dark scroll-snap-type:both@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.