Container scroll-state queries
コンテナのスクロールに関連する状態を検知し、それに応じたスタイルを適用できる新しいタイプのコンテナクエリです。sticky 配置要素が固定状態かどうか、スクロールスナップの状態、要素がスクロール可能かどうかを検知できます。JavaScriptのスクロールイベントリスナーなしで、スクロール状態に応じたUIの変更を実現します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.at-rules.container.scroll-state_queries 実験的 | 133 | 133 | | | 133 | |
| CSS @ ルール | ||||||
scroll-state queries.scrollable 実験的 | 133 | 133 | | | 133 | |
scroll-state queries.snapped 実験的 | 133 | 133 | | | 133 | |
scroll-state queries.stuck 実験的 | 133 | 133 | | | 133 | |
| CSS プロパティ | ||||||
scroll-state 実験的 | 133 | 133 | | | 133 | |
基本構文
CSS
.header {
position: sticky;
top: 0;
container-type: scroll-state;
}
@container scroll-state(stuck: top) {
.header { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
}ライブデモ
実務での使いどころ
-
スティッキーヘッダーの固定状態検知
sticky ヘッダーが上部に固定された際にシャドウを追加するなど、JavaScriptなしでスクロール状態に応じたスタイル変更ができます。
注意点
- Chrome 133以降でのみサポートされる実験的な機能です。Safari、Firefoxでは未サポートのため、プログレッシブエンハンスメントとして導入してください。
アクセシビリティ
- スクロール状態に応じた視覚的変更は補助的な情報として扱い、重要な機能がスクロール状態に依存しないようにしてください。