CSSだけでスクロール連動UI

最近、面白いCSS記事を見つけた。 CSSのみで、スクロール連動したUI処理ができるとの事。 このページ : スクロール連動UIはCSSだけで作れる！ 魅力的な内容だったので、この内容について、独自に深掘りしてみたいと思う。

iPhoneで動かなかった・・・

冒頭紹介したブログページの記事は、CSSの比較的新しい機能である

:target-current :target-before :target-after

という機能を使っているんですが、 この機能、2026年の初頭の今の時点で、SafariやFirefoxでは、動かないんですよね・・・ Can I useで確認 ということは、iPhoneでは動かないので、世の中的なシェア率としての使い所としては、現時点では少し厳しい。 でも確かに、CSSでこうしたUI処理ができてしまうのは、いろいろなメリットがある。

UI連動機能で使いたい場面

個人的に、考えられるスクロール連動機能について、リストアップしてみました。

スクロール × 状態管理

スクロール位置に応じて「今どの章か」をJSで確定させたい場合に有効。 冒頭紹介したブログの内容もこの部類になる。 例：記事進捗バー／章ごとの読了判定／次に読むべきカード表示

フォーム × 入力ステップ連動

ページ縦サイズが長いフォームなどの場合に、セクションごとのステップをスクロール判定して、必要な情報を表示（非表示）させることで、UIを効率化する。 例：項目ごとの説明表示や、アニメーションスタート（ストップ）など

メディア再生 × UI強調

ページ表示領域に入ったら、アニメーション（動画やCSSアニメ）をスタートさせることで、必ずスタートポイントから見ることができるようになる。 例 : 動画のチャプターに合わせてリストをハイライト

縦横スクロール混在ページ

たまに見かける、カルーセルかと思いきや、通常の縦スクロールを、横スクロールに変換して視覚コントロールをするようなサイトがある。 こうしたUIの判定を簡易にCPU負荷が少なく行えるのであれば、非常に有効な処理になる。 例 : 縦横スクロールの切り替えブレイクポイントの設置

通知・ガイド系UI

状況に応じて「今これを見てほしい」を強調表示する。 例：特定スクロールポイントのみ表示するチュートリアルや、操作誘導ハイライトなど

target-current,before,afterは使えるのか？

実際のところ、このプロパティは、使い物になるのか、それとも、使ってはダメなのか・・・ これは、かつて、CSSのhas()プロパティの導入が極めて遅かったFirefoxの例がある。 Firefoxは、かなりマイノリティなので、そんなの関係ね〜・・・と思って使っているサイトもチラホラあったが、 Firefoxの場合は、JSが起動（has()プロパティが存在しないブラウザの場合）は、Javascriptを起動するようなハイブリッドライブラリなども存在した。 今回のtarget-***も、同じ視点で、JSとCSSのハイブリッド版で、セットできるようになると、便利に使えるようになるのではないかと考えた。 ということは、target-currentのプロパティの設定仕様をそのまま使えるライブラリがあれば、それを利用すればいいのだけれど、 今の時点で、そうしたライブラリは、ググっても、チャピっても、四方八方探しても全く見つからない・・・ Polyfill系のライブラリはあったが、target-currentをカバーしているものは、今の所存在しないようだ。 ということは、作ってしまえばいいという、エンジニア結論に達しました。

あとがき

なんと、今回のtarget-currentに関して、いい感じのプログラミングお題をいただいた感じになりましたが、 正直、このライブラリがあれば、「欲しい！！」と個人的に強く思ったので、こいつは作らないといけないという想いが強くなりました。 他にもこのtarget特化型polyfillライブラリが欲しいという人がいたら、開発作業を早めたいと思いますが、ゆっくり、チンタラと作ってみたいと思います。 もちろん、出来上がったら、このブログで公開しますね（多分）