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 2020年1月.
* Some parts of this feature may have varying levels of support.
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)。
例
scrollIntoView() の使用
js
const element = document.getElementById("box"); element.scrollIntoView(); element.scrollIntoView(false); element.scrollIntoView({ block: "end" }); element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }); top/bottom の配置の制御
既定では、要素はスクロール可能な親要素の上端（または下端）に配置されます。独自の配置間隔を定義するには、 scroll-margin-top または scroll-margin-bottom を使用します。これは、ページに固定されたヘッダーがある場合に役立つことがよくあります。
HTML
html
<body> <header class="navbar">ナビバー</header> <main class="content"> <button id="go-to-bottom">下端へ移動</button> <button id="go-to-top">上端へ移動</button> </main> </body> CSS
css
.navbar { height: 50px; position: sticky; top: 0; border-bottom: 1.5px solid black; display: flex; justify-content: center; align-items: center; } .content { height: 2000px; position: relative; } #go-to-bottom { position: absolute; top: 10px; /* これがないと、スクロールした際に、ボタンがナビゲーションバーの 下端ではなくページの上端に配置されてしまいます。 */ scroll-margin-top: 60px; } #go-to-top { position: absolute; bottom: 10px; scroll-margin-bottom: 0; } JavaScript
js
const goToTop = document.getElementById("go-to-top"); const goToBottom = document.getElementById("go-to-bottom"); goToBottom.addEventListener("click", () => { goToTop.scrollIntoView({ behavior: "instant", block: "end" }); }); goToTop.addEventListener("click", () => { goToBottom.scrollIntoView({ behavior: "instant", block: "start" }); }); 結果
仕様書
| Specification |
|---|
| CSSOM View Module # dom-element-scrollintoview |