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;
}

ライブデモ

latestmese-j

CSS latestmese-j demo.

プレビュー全画面表示

rog. end

CSS rog. end demo.

プレビュー全画面表示

hilightposition

CSS hilightposition demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク