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 |
ブラウザーの互換性
Loading…