Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
その他 Limited support

scroll-initial-target

scroll-initial-targetは、スクロールコンテナの初期表示位置を特定の要素にスクロールした状態で開始させるCSSプロパティです。URLフラグメントでのスクロールと同様の動作を、CSS単体で実現できます。チャットアプリの最新メッセージへの自動スクロールや、長いコンテンツリストの特定位置への初期フォーカスに活用できます。

スクロール初期位置

概要

scroll-initial-targetは、スクロールコンテナの初期表示位置を特定の要素にスクロールした状態で開始させるCSSプロパティです。URLフラグメントでのスクロールと同様の動作を、CSS単体で実現できます。チャットアプリの最新メッセージへの自動スクロールや、長いコンテンツリストの特定位置への初期フォーカスに活用できます。

対応ブラウザ

デスクトップ

Chrome 133+
Edge 133+
Safari 未対応
Firefox 未対応

モバイル

Chrome Android 133+
Safari iOS 未対応
Firefox Android 未対応

基本構文

CSS 
.latest-message {
  scroll-initial-target: nearest;
}
.scroll-container {
  overflow-y: auto;
}

実務での使いどころ

  • チャットの最新メッセージへの自動スクロール

    チャットコンテナを初期表示時に最新メッセージの位置まで自動的にスクロールさせます。

注意点

  • ChromeとEdgeのみのサポートであり、他のブラウザではJavaScriptによるフォールバックが必要です。

アクセシビリティ

  • 初期スクロール位置の変更はユーザーの期待と一致しない場合があるため、視覚的なインジケーターで現在位置を示してください。

参考リンク