Element: scrollIntoView() メソッド
Element
インターフェイスの scrollIntoView()
メソッドは、 scrollIntoView()
が呼び出された要素がユーザーに見えるところまで、要素の親コンテナーをスクロールします。
構文
js
scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)
引数
alignToTop
省略可-
論理値です。
true
の場合、要素の上端がスクロール可能な祖先の表示範囲の上端に来るようにスクロールします。scrollIntoViewOptions: {block: "start", inline: "nearest"}
に相当します。これが既定値です。false
の場合、要素の下端がスクロール可能祖先の表示範囲の下端に来るようにスクロールします。scrollIntoViewOptions: {block: "end", inline: "nearest"}
に相当します。
-
scrollIntoViewOptions
省略可 Experimental -
以下のプロパティを持つオブジェクトです。
behavior
省略可-
スクロールを即座に行うか、滑らかにアニメーションさせるかを決定します。このオプションは文字列であり、以下のいずれかの値を取ります。
smooth
: スクロールをスムーズなアニメーションで行うinstant
: スクロールを単一のジャンプで即座に行うauto
: スクロールの動作をscroll-behavior
の計算値によって指定する
block
省略可-
垂直方向の配置を定義します。
start
,center
,end
,nearest
のいずれかです。既定値はstart
です。 inline
省略可-
水平方法の配置を定義します。
start
,center
,end
,nearest
のいずれかです。既定値はnearest
です。
返値
なし (undefined
)。
例
js
const 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()
Non-standard