これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

概要

Element.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""instant""smooth" のうちの一つ。 デフォルトは "auto"
block Optional
"start""center""end""nearest" のうちの一つ。デフォルトは "center"
inline Optional
"start""center""end""nearest" のうちの一つ。デフォルトは "nearest"

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

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

注記

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

仕様書

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

ブラウザ実装状況

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 29 1.0 (1.7 or earlier) 8[1] 38[1] 5.0[1]
scrollIntoViewOptions 61 36 (36)[2][3] 未サポート 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 4.3 1.0 (1.0) 未サポート 未サポート 5.0[1]
scrollIntoViewOptions 未サポート[1] 36.0 (36) 未サポート 未サポート  

[1] "smooth" な振る舞い側は "center" オプションのサポートなし

[2] "inline" オプションのサポートなし

[3] "block" オプションへの "nearest" または "center" の値のサポートなし(bug 1389274 参照)

参照

ドキュメントのタグと貢献者

このページの貢献者: KitaitiMakoto, fscholz, khalid32, ethertank, Potappo, Snaka
最終更新者: KitaitiMakoto,