Wat is CSS Scroll-State Query Generator?
A scroll-state container query is a CSS feature that lets you style elements based on the scroll state of a container. Instead of using JavaScript to detect scroll position and toggle classes, you write a @container scroll-state(...) query that automatically applies styles when elements are snapped, stuck, or when a container is scrollable. This enables scroll-driven UI like active carousel indicators and sticky header shadows without JavaScript.
Snel antwoord
Use CSS scroll-state() queries inside @container rules to style elements based on scroll position without JavaScript. Target snapped, stuck, scrollable, or overflowing states. Requires container-type: scroll-state and Chrome 135+. Include a JS fallback for cross-browser support.
Beperkingen
- Scroll-state queries require Chrome 135+ and are not yet supported in Firefox or Safari. Always provide a JavaScript fallback for production use.
- The container must have container-type: scroll-state set for scroll-state queries to work. This is a separate container-type from size or inline-size queries.
- Only a limited set of scroll states is available: snapped, stuck, scrollable, and overflowing. Complex scroll-driven animations still require JavaScript or scroll-driven animations (@scroll-timeline).
Zo gebruik je deze tool
- Select the scroll state to target: snapped (active snap item), stuck (sticky element), or scrollable (container with overflow).
- Set the target CSS selector and the scroll container selector.
- Choose the style change to apply when the state is active (opacity, scale, border, background).
- Copy the CSS, demo HTML, and optional JavaScript fallback snippet.
Waarvoor je het kunt gebruiken
- Highlight the currently snapped carousel item with full opacity while dimming others.
- Add a shadow to a sticky header only when it is stuck to the top of the viewport.
- Style a scrollable panel differently when it has overflow vs when all content fits.