CSS Scroll-State Query Generatorとは
スクロールステートコンテナクエリはコンテナのスクロール状態に基づいて要素をスタイル設定できるCSS機能です。JavaScriptを使用してスクロール位置を検出してクラスを切り替える代わりに@container scroll-state(...) クエリを記述して要素がスナップされたときスティッキーになったときまたはコンテナがスクロール可能なときに自動的にスタイルを適用します。これによりアクティブなカルーセルインジケーターやスティッキーヘッダーのシャドウなどをJavaScriptなしで実現できます。
クイックアンサー
CSS scroll-state()クエリを@containerルール内で使用してJavaScriptなしでスクロール位置に基づいて要素をスタイル設定します。スナップ、スティッキー、スクロール可能、オーバーフローの状態を対象にします。container-type: scroll-stateとChrome 135以上が必要です。クロスブラウザサポートのためにJSフォールバックを含めてください。
Last updated: 2026-05-28
制限事項
- スクロールステートクエリにはChrome 135以上が必要でFirefoxやSafariではまだサポートされていません。本番環境では常にJavaScriptフォールバックを提供してください。
- スクロールステートクエリが機能するにはコンテナにcontainer-type: scroll-stateが設定されている必要があります。これはサイズやインラインサイズのクエリとは別のコンテナタイプです。
- 利用可能なスクロール状態は限られています：snapped、stuck、scrollable、overflowing。複雑なスクロール駆動アニメーションには依然としてJavaScriptまたはスクロール駆動アニメーション（@scroll-timeline）が必要です。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- 対象とするスクロール状態を選択します。スナップ（アクティブなスナップ項目）、スティッキー（スティッキー要素）、またはスクロール可能（オーバーフローがあるコンテナ）。
- ターゲットのCSSセレクターとスクロールコンテナセレクターを設定します。
- 状態がアクティブなときに適用するスタイルの変更（不透明度、拡大縮小、境界線、背景）を選択します。
- CSS、デモHTML、およびオプションのJavaScriptフォールバックスニペットをコピーします。
主な用途
- 現在スナップされているカルーセル項目を完全な不透明度で強調表示し他を暗く表示します。
- スティッキーヘッダーがビューポートの上部に固定されたときにのみ影を追加します。
- スクロール可能なパネルをオーバーフローがある場合とすべてのコンテンツが収まる場合で異なるスタイルにします。