Choose a layout

scroll-snap-stop

Report an Issue

	Class	Description
snap-normal Sets scroll-snap-stop to normal, allowing the scroll to pass over this snap position. CSS Rules `.snap-normal { scroll-snap-stop: normal; }` Usage `<element class="snap-normal" />` Responsive Prefix `.snap-normal` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:snap-normal" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="snap-normal:hover" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="snap-normal:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before snap-normal::before" /> <element class="content-after snap-normal::after" />`	`.snap-normal`	Sets scroll-snap-stop to normal, allowing the scroll to pass over this snap position.
snap-always Sets scroll-snap-stop: always. Forces a stop at this snap point. CSS Rules `.snap-always { scroll-snap-stop: always; }` Usage `<element class="snap-always" />` Responsive Prefix `.snap-always` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:snap-always" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="snap-always:hover" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="snap-always:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before snap-always::before" /> <element class="content-after snap-always::after" />`	`.snap-always`	Sets scroll-snap-stop: always. Forces a stop at this snap point.