We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

概要

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() の定義
草案 初期定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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,