地味に全然知られてない、みんな待望してたやつ: `scroll-initial-target`
こんにちは。今日は全然知られてない[要出典]、すごい CSS プロパティを紹介します。
ただし、CSS プロパティと聞いてみなさんが一番気になるだろうことを予め書いておきます。
残念ながらこの記事を執筆した現在(2025/12/12)では Chromium 限定です。
Chromium ブラウザでは今年の2月から対応しています。
あとこの記事を書くのに AI は使ってません。(サンプルコード作成には使用しています。)安心して読んでね！(？)
なにこれ？
TLDR: スクロールの初期位置を設定できるやつ！！
モバイル向け UI に多いものとして、「スクロールの初期位置が一番上じゃない」というものがありますよね。
例えば、メッセージアプリ(初期位置が一番下)だったり、カレンダーアプリ(初期位置が今月で、スワイプで過去/未来の月に移動する)だったり。
今まで Web でこれを表現するには、開発者が手動で scroll() などを行う必要がありました。
例えば <dialog> 要素の中でこれをやろうとすると、open の時でないとスクロールさせられない為にダイアログが開かれるのを監視する必要があったりと、なかなか面倒です。
この問題が、これ1つで解決します！！
どやって？
まだ MDN にも載ってないので chromestatus.com や仕様を参照します。
設定できる値は none | nearest です。
百聞は一見にしかず。
数個サンプルを作りましたので、さっそく見ていきましょう。
(サンプルは全部モバイル向けレイアウトになっています。)
サンプル1: チャットアプリ
チャットアプリといえば、最新のメッセージが一番下に来て、また、スクロール位置も一番下となっているのがお決まりですね。
それを HTML/CSS だけで実現できます！JavaScript は不要です。
.message-group の :last-child に scroll-initial-target: nearest; を設定しています。
表示されてすぐのスクロール位置が一番下になっている事がわかると思います。凄いでしょう？
サンプル2: カレンダー
カレンダーアプリといえば、現在の月のカレンダーが一番上となるようにスクロール位置が設定されているのがお決まりですね。
それを(略)。
.calendar-grid:has(.today) に scroll-initial-target: nearest; を設定しています。
表示されてすぐのスクロール位置が12月になっていて、そこから上や下にスクロールすることができるようになっている事がわかると思います。凄いでしょう？
ちなみに
このプロパティを設定すると、ターゲットとなる要素がなるべく一番上に表示されるように初期スクロール位置が設定されます。
その為、「中心に表示させたい」「画面の一番下に表示させたい」場合、上手く行かないかもしれません。
ですが、一応このプロパティは CSS Scroll Snap Module の一部となっています。なので、同じ Module のプロパティである「scroll-snap-align」を使って初期位置を調整することが可能です。
おわりに
どうです、凄いでしょう？
これを使えばリストアイテムを左右にスワイプしてアクションを表示 or 実行する UI も実現できるのではないかと一瞬考えましたが、おそらくこのプロパティは複数要素に設定することを想定してないのではと思い諦めました。
スクロールコンテナのスコープを設定できれば大丈夫かもしれませんが試していません。
まだ Chromium 系ブラウザでしか使えないところが惜しいですが、今後サポートするブラウザが増えることを祈りたいですね。
おしまい。
Discussion