ScrollToOptions
The ScrollToOptions
は CSSOM View 仕様の辞書で、ある要素がスクロールする位置、およびスクロールがスムーズに行われるかどうかを指定するプロパティを指定します。
ScrollToOptions
辞書は以下のメソッドの引数として提供することができます。
プロパティ
ScrollToOptions.top
(en-US)- ウィンドウまたは要素をスクロールするための Y 軸に沿ったピクセル数を指定します。
ScrollToOptions.left
(en-US)- ウィンドウまたは要素をスクロールするための X 軸に沿ったピクセル数を指定します。
ScrollToOptions.behavior
(en-US)- スクロールするのに滑らかにアニメーションするのか、一回のジャンプで瞬時に行うのかを指定します。これは実際には
ScrollToOptions
で実装されているScrollOptions
辞書で定義されています。
例
scrolltooptions の例 (ライブでご覧ください) では、3 つの値を入力するフォームを用意しました。左と上のプロパティ (X 軸と Y 軸に沿ってスクロールする位置) を表す 2 つの数値と、滑らかなスクロールを有効にするかどうかを示すチェックボックスです。
フォームが送信されると、入力された値を ScrollToOptions 辞書に格納し、辞書を引数として渡して Window.ScrollTo()
メソッドを呼び出すイベントハンドラーが実行されます。
form.addEventListener('submit', (e) => {
e.preventDefault();
var scrollOptions = {
left: leftInput.value,
top: topInput.value,
behavior: scrollInput.checked ? 'smooth' : 'auto'
}
window.scrollTo(scrollOptions);
});
仕様書
ブラウザーの互換性
BCD tables only load in the browser