Element
インターフェイスの scrollIntoView()
メソッドは、 scrollIntoView()
が呼び出された要素がユーザーに見えるところまで、要素の親コンテナーをスクロールします。構文
element.scrollIntoView(); element.scrollIntoView(alignToTop); // 論理型の引数 element.scrollIntoView(scrollIntoViewOptions); // オブジェクト型の引数
引数
alignToTop
省略可Boolean
値です。true
の場合、要素の上端がスクロール可能な祖先の表示範囲の上端に来るようにスクロールします。scrollIntoViewOptions: {block: "start", inline: "nearest"}
に相当します。これが既定値です。false
の場合、要素の下端がスクロール可能祖先の表示範囲の下端に来るようにスクロールします。scrollIntoViewOptions: {block: "end", inline: "nearest"}
に相当します。
scrollIntoViewOptions
省略可- 以下のプロパティを持つオブジェクトです。
-
behavior
省略可- 推移のアニメーションを定義します。
auto
またはsmooth
のどちらかです。既定値はauto
です。 block
省略可- 垂直方向の配置を定義します。
start
,center
,end
,nearest
の何れかです。既定値はstart
です。 inline
省略可- 水平方法の配置を定義します。
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() の定義 |
草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser