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

scroll-initial-target

scroll-initial-target は CSS のプロパティで、その親要素であるスクロールコンテナーが最初にレンダリングされた際に、スナップターゲットとなり得る要素を定義することができます。

スクロール初期位置

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
scroll-initial-target
実験的
133
133
133
nearest
実験的
133
133
133
none
実験的
133
133
133
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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

ライブデモ

最新メッセージ

CSS の 最新メッセージ パターンです。

プレビュー全画面表示

ログの末尾

CSS の ログの末尾 パターンです。

プレビュー全画面表示

ハイライト位置

CSS の ハイライト位置 パターンです。

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク