CSSツール

無料 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.

ツールを読み込み中...

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.

クイックアンサー

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.

制限事項

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

使い方

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.

主な用途

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.

用途

使用例

例

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.

例

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.

よくあるミス

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.

検証

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

FAQ

CSS Scroll-State Query GeneratorのFAQ

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.