ScrollSnap

Pure-CSS scroll-snap container — sets scroll-snap-type on the host and scroll-snap-align on direct children. No GSAP, no JavaScript per-tick. Use it for horizontal carousels, full-page section scrollers, and snap galleries.

Swipe / scroll horizontally — every tile snaps to the start of the viewport.

Snap · 1

Snap · 2

Snap · 3

Snap · 4

Snap · 5

Snap · 6

Usage

import { ScrollSnap } from '@bwo-ui/react';

// Horizontal section carousel
<ScrollSnap axis="x" strictness="mandatory" align="start"
  style={{ display: 'flex', overflowX: 'auto' }}>
  <Slide />
  <Slide />
  <Slide />
</ScrollSnap>

// Full-page vertical sections
<ScrollSnap axis="y" align="start"
  style={{ height: '100vh', overflowY: 'auto' }}>
  <Section style={{ height: '100vh' }} />
  <Section style={{ height: '100vh' }} />
</ScrollSnap>

Props

Prop	Type	Default	Description
`axis`	`'x' \| 'y' \| 'both'`	`'y'`	Axis to snap along.
`strictness`	`'mandatory' \| 'proximity'`	`'mandatory'`	How aggressively the browser snaps. mandatory locks to the nearest snap point; proximity only snaps if you stop near one.
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Snap-align applied to every matched child.
`childSelector`	`string`	`':scope > *'`	CSS selector for the children that should snap.
`as`	`ElementType`	`'div'`	HTML tag or component to render the wrapping element as.