📜

CSS scroll-stateクエリで実現する自動隠れヘッダー機能

に公開
CSS
Web
frontend
scroll
tech

はじめに

Webサイトを閲覧する際、スクロールダウン時にヘッダーが邪魔に感じ、スクロールアップ時には素早くナビゲーションにアクセスしたいと思ったことはないでしょうか。私自身、よく読み物系のサイトで長い記事を読んでいるとき、固定ヘッダーが画面を占有していることに少しストレスを感じていました。

従来、このような「下スクロール時にヘッダーを隠し、上スクロール時に表示する」機能を実装するにはJavaScriptを使用する必要がありました。しかし、CSS scroll-stateクエリという新しい技術により、CSSのみでこの機能を実現できるようになりました。

この記事では、実際にデモコードを作成して試した経験をもとに、scroll-stateクエリの使い方とその可能性について解説します。

scroll-stateクエリとは

CSS Container Queriesファミリーの新しいメンバーであるscroll-stateクエリは、要素のスクロール状態に基づいてスタイルを適用できる機能です。従来のscrollableクエリが「スクロール可能かどうか」を判定するのに対して、scroll-stateクエリは「実際にスクロールされた方向」を記憶する点が革新的です。

この機能の最大の特徴は、スクロール方向を自動的に検知し、CSS側でその情報を利用してスタイルを動的に変更できることです。つまり、従来JavaScriptで実装していたスクロール監視機能を、CSSだけで実現できるようになったということです。

では、実際にどのような構文で使用するのか詳しく見ていきましょう。

基本的な使用方法

scroll-stateクエリの基本的な構文は以下の通りです：

html {
  container-type: scroll-state;
}

header {
  @container scroll-state(scrolled: bottom) {
    /* 下方向にスクロールされた時のスタイル */
    translate: 0 -100%;
  }
}

この実装では、html要素にcontainer-type: scroll-stateを設定することで、ページ全体のスクロール状態を監視できるようにしています。そして、scrolled: bottom条件によって、下方向にスクロールされた際にヘッダーを上方向に移動させて非表示にします。

私が作成したデモコードでは、以下のような実装を行いました：

html {
  container-type: scroll-state;
}

header {
  position: fixed;
  z-index: 1;
  inset: 0 0 auto;
  transition: translate 0.25s;
  translate: 0 0;
  
  @container scroll-state(scrolled: bottom) {
    translate: 0 -100%;
  }
}

ここではtransition: translate 0.25sによってスムーズなアニメーション効果を追加し、ユーザーエクスペリエンスを向上させています。これにより、ヘッダーの表示・非表示が自然な動きで実行されます。

この基本的な実装を理解したところで、次は実際にどのような動作が実現されるのか詳しく確認してみましょう。

実際の動作とメリット

私が作成したデモページでは、各セクションの高さを200vh（ビューポートの2倍の高さ）に設定し、十分なスクロール範囲を確保しました。実際にページをスクロールしてみると、以下のような動作を確認できます：

下方向スクロール時
ページを下にスクロールすると、ヘッダーが自動的に上方向にスライドして画面から隠れます。これにより、コンテンツの表示領域が最大化されます。

上方向スクロール時
逆に上にスクロールすると、ヘッダーが再び表示されます。これにより、ユーザーはナビゲーションに素早くアクセスできます。

この実装による主なメリットは以下の通りです：

JavaScriptが不要
従来はスクロールイベントのリスナーを設置し、スクロール位置を計算する必要がありましたが、CSSのみで実現できるため、パフォーマンスの向上が期待できます。

プログレッシブエンハンスメント
未対応ブラウザでは通常の固定ヘッダーとして動作するため、段階的な機能強化として安全に導入できます。

実装の簡素化
複雑なJavaScriptロジックが不要になることで、メンテナンス性が向上し、バグの発生リスクも低減されます。

これらのメリットを享受するためには、ブラウザサポートの現状を理解しておくことが重要です。次のセクションでは、現在の対応状況と今後の展望について説明します。

ブラウザサポートと今後の展望

2025年11月現在、scroll-stateクエリは実験的な機能として位置づけられており、限定的なサポート状況となっています。

現在の対応状況

  • Chrome Canaryでのみ利用可能（実験的フラグを有効にする必要あり）
  • Firefox、Safari、その他のブラウザでは未対応
  • Chrome 144での正式サポートが予定されている

実際にデモを試す場合は、Chrome Canaryをダウンロードし、chrome://flagsから該当する実験的機能を有効にする必要があります。これは、新しいWeb技術を先行して体験できる貴重な機会でもあります。

しかし、プロダクション環境での使用を検討する際は、フォールバック戦略を準備することが重要です。未対応ブラウザでは単純に条件が無視されるため、通常の固定ヘッダーとして動作します。

将来的な可能性
この機能が正式にサポートされれば、以下のような応用が期待できます：

  • より複雑なスクロール連動アニメーション
  • パフォーマンスを重視したスクロールエフェクト
  • アクセシビリティに配慮したスクロール制御

現在は実験的段階ですが、この技術の登場により、今後のWebサイト制作における新たな選択肢が増えることは確実です。

まとめ

CSS scroll-stateクエリは、従来JavaScriptでしか実現できなかったスクロール方向の検知機能を、CSSのみで実装できる画期的な技術です。今回のデモ制作を通じて、その実装の簡潔さと動作の滑らかさを実感することができました。

特に印象的だったのは、わずか数行のCSSで直感的な動作を実現できる点です。translateプロパティとtransitionを組み合わせることで、自然なアニメーション効果も簡単に追加できます。

現時点では実験的機能であるため、実際のプロジェクトでの採用には慎重な判断が必要ですが、Chrome 144での正式サポート後は、多くのWebサイトでこの技術が活用されることでしょう。

WebフロントエンドにおけるCSSの可能性は日々拡張されており、scroll-stateクエリもその進歩の一端を示す技術といえます。今後のブラウザサポートの拡充とともに、より豊かなユーザーエクスペリエンスを提供する手段として注目していきたい技術です。

GitHubで編集を提案

Discussion