jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS Scroll-State Query Generator

Generate CSS scroll-state() container queries for styling snapped, stuck, or scrollable elements. Includes JavaScript fallback for cross-browser support.

Tool wird geladen...

Was ist 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.

Kurze Antwort

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.

Einschränkungen

  • 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).

So nutzt du dieses Tool

  1. Select the scroll state to target: snapped (active snap item), stuck (sticky element), or scrollable (container with overflow).
  2. Set the target CSS selector and the scroll container selector.
  3. Choose the style change to apply when the state is active (opacity, scale, border, background).
  4. Copy the CSS, demo HTML, and optional JavaScript fallback snippet.

Wofür du es nutzen kannst

  • 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.

Anwendungsfalle

Praxisbeispiele

Beispiel

Active carousel indicator

A carousel shows product cards. Use scroll-state(snapped: true) to apply full opacity and a border highlight to the currently snapped card while other cards are dimmed. No JavaScript scroll listener needed.

Beispiel

Sticky header shadow

A page has a sticky header. Use scroll-state(stuck: true) on the header to add a box-shadow when it becomes stuck, indicating the user has scrolled past the top of the page.

Haufige Fehler

  • Using scroll-state() without setting container-type: scroll-state on the scroll container — the query has no effect.
  • Expecting scroll-state() to work in all browsers — it is a Chrome 135+ feature. Always provide a JS fallback.
  • Using scroll-state queries on elements that never reach the target state — verify the element can actually be snapped or stuck in the layout.

Überprüfung

  1. Scroll the container and verify the styled elements update correctly — snapped items should show the active style, non-snapped items the default.
  2. Test with the JavaScript fallback disabled to confirm the CSS-only approach works in Chrome 135+.

FAQ

Fragen zu CSS Scroll-State Query Generator

What states does scroll-state() support?

Currently supported: snapped (element is the active scroll-snap target), stuck (sticky element is stuck to a boundary), scrollable (container has scrollable overflow), and overflowing (content overflows the container). These states are queried inside @container scroll-state(...) rules.

How is scroll-state() different from JavaScript scroll events?

Scroll-state queries run on the compositor thread, not the main JavaScript thread. They are more performant and do not cause jank. JavaScript scroll events fire on the main thread and can cause layout thrashing if not debounced. For simple visual state changes, scroll-state queries are the better choice.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren