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);
});

仕様書

仕様書 状態 備考
CSS Object Model (CSSOM) View Module
ScrollToOptions の定義
草案

ブラウザーの互換性

No compatibility data found for api.ScrollToOptions.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.