Study · CSS · Scrolling

A stateful scroll surface

Let a snapped carousel card recognise and style its active state.

A carousel combines two ideas: scroll snapping settles each card into place, while scroll-state queries let the snapped card change its appearance. Use the arrows, dots or a sideways swipe to move between cards.

  1. 01 / 03ScrollMove through the cards
  2. 02 / 03SnapSettle on a card
  3. 03 / 03ReactThe active card changes surface

Slide 1 of 3

@container slide scroll-state(snapped: x) {
  .card { background: var(--study-specimen-background); }
}

Each slide is a query container. When it snaps into place, scroll-state(snapped: x) gives its inner card a lighter surface. The controls and position readout follow the scroll; a JavaScript fallback supplies the active appearance where needed.