Container scroll-state queries
コンテナのスクロールに関連する状態を検知し、それに応じたスタイルを適用できる新しいタイプのコンテナクエリです。sticky 配置要素が固定状態かどうか、スクロールスナップの状態、要素がスクロール可能かどうかを検知できます。JavaScriptのスクロールイベントリスナーなしで、スクロール状態に応じたUIの変更を実現します。
概要
コンテナのスクロールに関連する状態を検知し、それに応じたスタイルを適用できる新しいタイプのコンテナクエリです。sticky 配置要素が固定状態かどうか、スクロールスナップの状態、要素がスクロール可能かどうかを検知できます。JavaScriptのスクロールイベントリスナーなしで、スクロール状態に応じたUIの変更を実現します。
対応ブラウザ
デスクトップ
Chrome 133+
Edge 133+
Safari 未対応
Firefox 未対応
モバイル
Chrome Android 133+
Safari iOS 未対応
Firefox Android 未対応
基本構文
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では未サポートのため、プログレッシブエンハンスメントとして導入してください。
アクセシビリティ
- スクロール状態に応じた視覚的変更は補助的な情報として扱い、重要な機能がスクロール状態に依存しないようにしてください。