Element.scrollIntoView()
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
省略可 Experimental-
以下のプロパティを持つオブジェクトです。
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"});
メモ
他の要素のレイアウトによっては、要素の上部または下部まで完全にスクロールされない場合があります。
仕様書
Specification |
---|
CSSOM View Module # dom-element-scrollintoview |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
Element.scrollIntoViewIfNeeded()
(en-US) Non-standard