はじめに
本記事で紹介する内容は2025/2/28現在、Chrome133でのみ動作しているものです！
他ブラウザの適応状態はおなじみのCan I use...にて確認お願いします。
おしゃれなHPに行くとよく、スクロールしたらヘッダーが見えたり、スライドアニメーションがピタッと止まったりとスクールすることをトリガーとした多くのアニメーションが実装されてますね。
今までですと、CSSをこねくりまわしたり、JSでサクッと状態検知して書いたり、あきらめてjQueryを使ったりと何かと手間がありました。
そんな中、Chrome133からは割とサクッと簡単にスクロールに関する動作がCSSだけで組めるようになったので紹介します。
scroll-state()
コンテナクエリの1種でスクロールしたことによって、固定、スナップ動作、スクロール可能状態へ変更ができるようになりました！
原文はこちらになります。
実際にどういうことができるようになるかというと...
See the Pen Untitled by 渉櫻井 (@ipeibcld-the-solid) on CodePen.
このようにスクロールすることで、ヘッダー部分に色がつくようになりました。
実際にどういうことをしているのかですが...
- コンテナ対象のタグに
container-type:scroll-state;プロパティの定義をする - 状態変化させる子セレクタに対して
@containerを付与し、scroll-state(〇〇: ××)を記入する
今回のデモでは.stuck-topクラスに container-type:scroll-state; を、子セレクタのnavに対して@container scroll-state(stuck: top) を付与しています。
こうすることで今回はtopにスタックされている状態になれば状態が変化するようになります。
今回のデモではすでにヘッダとして固定されており、わかりくいのでもう少しわかりやすい公式のデモはこちらになります。
See the Pen First scroll-state() query by web.dev (@web-dot-dev) on CodePen.
画面TOPまでスクロールされた結果、ハイライトが変更されたことが確認できます。
このように、スクロールされたときの状態で様々な処理が今後できるようになっていきます。
他にも、スクロール可能な状態を読み込み、画面TOPに戻るボタンを表示させたり、スライドがスナップされたことを読み取り、スライド強調させたりなど、スクールに関して多くの動作がCSSだけで完結します。
最後に
まだまだすべてのブラウザへの普及は先になりますが、CSSだけでできることがどんどん増えていきますね！
CSSの勉強がまだまだ未熟な自分にとって学ぶべきことが多いので、この先何がCSSだけでできるようになるのか楽しみです✨