CSSの新しいクエリscroll-stateを使用すると、ページの途中で上にスクロールした際にヘッダだけを再度表示が簡単に実装できるようになります

Post on:2025年11月5日

sponsorsr

CSSに便利な機能が追加されます！
スクロールした方向を記憶するクエリで、たとえば下にスクロールしたときにはヘッダも普通に上部に隠れ、その後ページのどこからでも上にスクロールするとヘッダを上からアニメーションで再度表示するといったことがほんの数行のCSSで簡単に実装できるようになります。

Solved by CSS Scroll State Queries
by Bramus!

スクロールの状態をクエリするCSSのscroll-stateに新しいタイプscrolledが使えるようになります。

スクロールが可能であることを表すscrollableとは異なり、scrolledは、最後にスクロールした方向を記憶します。これを利用することで、「非表示バー」を作成できます。つまり、下にスクロールすると（または下にスクロールした後）、非表示バーは非表示になります。その後、上にスクロールすると、非表示バーが表示されます。

下記のCSSは、下にスクロールしたときに固定ヘッダを非表示します。

html {
  container-type: scroll-state;
}

header {
  transition: translate 0.25s;
  translate: 0 0;

  /* 最後に下方向にスクロールしたときにヘッダを上にスライドします */
  @container scroll-state(scrolled: bottom) {
    translate: 0 -100%;
  }
}

html {

container-type: scroll-state;

}

header {

transition: translate 0.25s;

translate: 0 0;

/* 最後に下方向にスクロールしたときにヘッダを上にスライドします */

@container scroll-state(scrolled: bottom) {

translate: 0 -100%;

}

meduz氏より素晴らしいアドバイスがありました。ヘッダにフォーカス可能なインタラクティブなコンテンツが含まれている場合は、header:not(:focus-within)を使用すると、フォーカスがある場合にバーが非表示になることを防ぐことができます。

下記のデモページは、上記のCSSを使用したライブデモです。
2025年11月現在、scrolledはブラウザにサポートされていないため、Chrome Canaryでchrome://flagsから「Experimental Web Platform features」を「有効」にしてご覧ください。

ブラウザがscrolledをサポートしていない場合は、ヘッダは固定されたままです。これはプログレッシブエンハンスメントの素晴らしい例と言えるでしょう。

See the Pen
Hidey Bar Demo (Hide on Scroll Down, Show on Scroll Up // Scroll State Queries) by coliss (@coliss)
on CodePen.

scrolledが使えるようになれば、この記事で紹介したようなハックの必要はなくなります。この新しい機能は、Chrome 144でサポートされる予定です。