Widely available すべての主要ブラウザで対応済み。安心して使用可能。

scrollIntoView()

Element インターフェイスの scrollIntoView() メソッドは、 scrollIntoView() が呼び出された要素がユーザーに見えるところまで、要素の親コンテナーをスクロールします。

表示・ナビゲーション

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
scrollIntoView
1
79
1
3
18
1
scrollIntoView (options parameter)

options`パラメータ
61
79
36
14
61
14
scrollIntoView (options parameter block option)

`block` オプション
61
79
58
14
61
14
scrollIntoView (options parameter inline option)

`inline` オプション
61
79
58
14
61
14
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 6件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (79)
  • このバージョンで機能が削除されました (17)
実装メモ
  • サポートされているパラメータは `alignToTop` のみです。
  • SVGElement` のようなすべての `Element` オブジェクトではなく、`HTMLElement` に対してのみサポートされる。
  • `smooth` 動作はサポートされていません。
注釈 2件
実装メモ
  • `center` オプションはサポートされていません。
  • Safari 15.4 以前のバージョンでは、`smooth` 動作はサポートされていませんでした。
注釈 2件
実装メモ
  • `center` オプションはサポートされていません。
  • iOS 15.4以前では、`smooth` 動作はサポートされていませんでした。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (58)
実装メモ
  • `"top"` および `"bottom"` のみが有効で、`"nearest"` や `"center"` は使用できません。

基本構文

JAVASCRIPT 
scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(options)

実務での使いどころ

  • scrollIntoView() の活用

    Element インターフェイスの scrollIntoView() メソッドは、 scrollIntoView() が呼び出された要素がユーザーに見えるところまで、要素の親コンテナーをスクロールします。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク