11 · Scroll state

Scroll state

CSS reacts to scroll snap/stuck state

Chrome 135+ · experimental

← Index

container-type: scroll-state

Enables queries over the container's scroll state: snapped, stuck, etc.

container-type: scroll-state

@container scroll-state(snapped: x)

Each card is its own container. When snapped, its opacity rises to 1. Scroll down.

@container not scroll-state(snapped: x)

No JS

Before you needed IntersectionObserver to know which card was active. Now CSS knows on its own.

Scroll-snap carousel — scroll horizontally

Each card dims when not snapped. Scroll by dragging, arrows or swipe.

01Intro

02container-type

03snapped: x

04opacity 1

05state query

06no JS

css

/* cada item es su propio contenedor scroll-state */
.ss-item {
  container-type: scroll-state;
  scroll-snap-align: center;
}

/* cuando NO está snapped, se atenúa */
@container not scroll-state(snapped: x) {
  .ss-item-inner {
    opacity: .25;
  }
}

An honest note on support

Many of these APIs are recent and not yet in every browser (see the pill on each section). The nice part is they all degrade gracefully: the carousel still scrolls, the accordion opens/closes, the textarea works — just without the animated "plus".