Element: scrollIntoView() メソッド
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.
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