ウェブページのヘッダーを、スクロールに応じて自動的に隠したり表示したりする実装を考えてみてください。従来は必ずJavaScriptでスクロール位置を監視し、DOM操作で状態を変更する必要がありました。しかし2026年、Chrome 144でリリースされたCSSスクロール状態クエリ「scroll-state(scrolled)」によって、この実装が純粋なCSSだけで実現できる時代が始まっています。
scroll-state()クエリが解決する現場の課題
スクロール方向に反応するUIパターンは、現代のウェブサイトでごく一般的なものです。ユーザーのスクロール方向に応じたUIパターンは頻繁に実装されており、典型例はページを下にスクロールしたときに自動的に隠れ、上にスクロールしたときに再表示されるヘッダーです。従来、この機能にはJavaScriptでスクロール位置を追跡する必要があり、パフォーマンスのオーバーヘッドとコードの複雑さを招いていました。
この課題は開発現場で多くの時間を消費してきました。スクロールイベントリスナーの実装、パフォーマンス最適化のためのthrottling処理、さらに異なる端末やブラウザでの動作確認。一見単純に見える機能の背後に、相当な技術的コストが隠れていたのです。
scroll-state(scrolled)機能は、CSSのみを使用して同様の機能を効率的に実現する方法を提供します。これは単なる新機能ではなく、ウェブ制作のワークフロー自体を変える転換点といえるでしょう。
具体的な実装方法とその威力
scrolled状態は、ユーザーの直前の行動を追跡します。最新のスクロール方向を記録し、「ユーザーはどちらの方向に動いたか？」をブラウザに問い合わせるような仕組みです。これは従来の「隠れるヘッダー」パターンに最適です。
実装は驚くほどシンプルです。HTMLに`container-type: scroll-state`を設定し、`@container scroll-state(scrolled: bottom)`で下方向スクロール時にヘッダーを隠し、`@container scroll-state(scrolled: top)`で上方向スクロール時にヘッダーを表示するだけで完成します。JavaScriptは一切不要です。
この機能の価値は、コードの簡潔性だけにとどまりません。これらの機能はパフォーマンス、UI向上、そしてアクセシビリティの面でも重要だからです。ブラウザがネイティブで処理するため、JavaScriptによる実装よりも高速で、メモリ効率も向上します。
従来のJavaScript実装との比較
現在多くの制作現場で使われているJavaScript実装と比較すると、その違いは明確です。従来の手法では、スクロールイベントの監視、位置の計算、DOM要素の状態更新という一連の処理が必要でした。さらに、パフォーマンス最適化のために`throttle`や`debounce`を使った処理制限も実装する必要がありました。
一方、CSSスクロール状態クエリを使用すれば、ブラウザが自動的に最適化された処理を行います。開発者が書くコードは数行で済み、メンテナンス性も大幅に向上します。バグの原因となりやすいJavaScriptのイベントハンドリングやメモリリークの心配もありません。
Chrome 133でリリースされた初期実装では、stuck、snapped、scrollableの3つの状態が利用可能でしたが、これだけでも大きな問題を解決しました。特に「position: stickyのヘッダーが実際に画面上部に固定されているか？」という昔からの課題に、以前は複雑なJavaScriptが必要でした。
制作現場への影響と導入のタイミング
現在、この機能はChrome 144でのみ利用可能ですが、progressive enhancementとして実装することで、即座に恩恵を受けられます。対応していないブラウザでは従来通りの静的なレイアウトが表示され、Chrome系ブラウザではより洗練された体験を提供できます。
つくばのような地方でも、クライアントからモダンなUIの要求は増え続けています。しかし限られた開発リソースで、複雑なJavaScript実装を保守するのは現実的ではありません。CSSスクロール状態クエリは、こうした現場の課題を根本的に解決する可能性を秘めています。
Chrome 144でCSS専用のスクロール方向状態が追加され、隠れるヘッダーやスクロールヒント、スクロール矢印などのUIを純粋なCSSでスタイリングできるようになりました。これにより、多くのライブラリに依存していた機能が、標準技術だけで実現できる時代が到来しています。
ウェブ制作の現場では、技術の進歩を適切なタイミングで取り入れることが重要です。scroll-state()クエリは、まさに今がその転換点。CSSが単なるスタイリング言語から、本格的なUI状態管理ツールへと進化する歴史的瞬間に、私たちは立ち会っているのかもしれません。
