Element.scrollIntoView()

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

構文

element.scrollIntoView();
element.scrollIntoView(alignToTop); // 論理型の引数
element.scrollIntoView(scrollIntoViewOptions); // オブジェクト型の引数

引数

alignToTop Optional
Boolean 値です。
  • true の場合、要素の上端がスクロール可能な祖先の表示範囲の上端に来るようにスクロールします。 scrollIntoViewOptions: {block: "start", inline: "nearest"} に相当します。これが既定値です。
  • false の場合、要素の下端がスクロール可能祖先の表示範囲の下端に来るようにスクロールします。 scrollIntoViewOptions: {block: "end", inline: "nearest"} に相当します。
scrollIntoViewOptions Optional
以下のプロパティを持つオブジェクトです。
behavior Optional
推移のアニメーションを定義します。
auto または smooth のどちらかです。既定値は auto です。
block Optional
垂直方向の配置を定義します。
start, center, end, nearest の何れかです。既定値は start です。
inline Optional
水平方法の配置を定義します。
start, center, end, nearest の何れかです。既定値は nearest です。

var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

メモ

他の要素のレイアウトによっては、要素の上部または下部まで完全にスクロールされない場合があります。

仕様書

仕様書 状態 備考
CSS Object Model (CSSOM) View Module
Element.scrollIntoView() の定義
草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
scrollIntoView
実験的
Chrome 完全対応 29Edge 完全対応 17
補足
完全対応 17
補足
補足 The only parameter supported is alignToTop.
未対応 12 — 17
補足
補足 This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
補足 No support for smooth behavior.
Firefox 完全対応 1IE 完全対応 8
補足
完全対応 8
補足
補足 This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
補足 No support for smooth behavior or center options.
Opera 完全対応 38Safari 完全対応 6
補足
完全対応 6
補足
補足 No support for smooth behavior or center options.
WebView Android 完全対応 ≤37Chrome Android 完全対応 29Firefox Android 完全対応 4Opera Android 完全対応 41Safari iOS 完全対応 5
補足
完全対応 5
補足
補足 No support for smooth behavior or center options.
Samsung Internet Android 完全対応 2.0
scrollIntoViewOptions
実験的
Chrome 完全対応 61
補足
完全対応 61
補足
補足 The block and inline options support the values start, center, end, nearest.
Edge 完全対応 79
補足
完全対応 79
補足
補足 The block and inline options support the values start, center, end, nearest.
Firefox 完全対応 36
補足
完全対応 36
補足
補足 No support for inline option.
補足 Before Firefox 58, nearest and center values for the block option was unsupported. See bug 1389274.
IE 未対応 なしOpera 完全対応 48
補足
完全対応 48
補足
補足 The block and inline options support the values start, center, end, nearest.
Safari 未対応 なしWebView Android 完全対応 61
補足
完全対応 61
補足
補足 The block and inline options support the values start, center, end, nearest.
Chrome Android 完全対応 61
補足
完全対応 61
補足
補足 The block and inline options support the values start, center, end, nearest.
Firefox Android 完全対応 36
補足
完全対応 36
補足
補足 No support for inline option.
補足 Before Firefox 58, nearest and center values for the block option was unsupported. See bug 1389274.
Opera Android 完全対応 45
補足
完全対応 45
補足
補足 The block and inline options support the values start, center, end, nearest.
Safari iOS 未対応 なしSamsung Internet Android 完全対応 8.0
補足
完全対応 8.0
補足
補足 The block and inline options support the values start, center, end, nearest.

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報