ScrollToOptions

The ScrollToOptions は CSSOM View 仕様の辞書で、ある要素がスクロールする位置、およびスクロールがスムーズに行われるかどうかを指定するプロパティを指定します。

ScrollToOptions 辞書は以下のメソッドの引数として提供することができます。

• Window.scroll()
• Window.scrollBy()
• Window.scrollTo()
• Element.scroll() (en-US)
• Element.scrollBy()
• Element.scrollTo()

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