ScrollToOptions

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

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

プロパティ

ScrollToOptions.top
ウィンドウまたは要素をスクロールするための Y 軸に沿ったピクセル数を指定します。
ScrollToOptions.left
ウィンドウまたは要素をスクロールするための X 軸に沿ったピクセル数を指定します。
ScrollToOptions.behavior
スクロールするのに滑らかにアニメーションするのか、一回のジャンプで瞬時に行うのかを指定します。これは実際には 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 の定義
草案

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
ScrollToOptionsChrome 完全対応 45Edge 完全対応 79Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 32Safari 完全対応 ありWebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 ありOpera Android 完全対応 32Safari iOS 完全対応 ありSamsung Internet Android 完全対応 5.0
behaviorChrome 完全対応 45Edge 完全対応 79Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 32Safari 完全対応 あり
補足
完全対応 あり
補足
補足 Safari does not have support for the smooth scroll behavior.
WebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 ありOpera Android 完全対応 32Safari iOS 完全対応 あり
補足
完全対応 あり
補足
補足 Safari does not have support for the smooth scroll behavior.
Samsung Internet Android 完全対応 5.0
leftChrome 完全対応 45Edge 完全対応 79Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 32Safari 完全対応 ありWebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 ありOpera Android 完全対応 32Safari iOS 完全対応 ありSamsung Internet Android 完全対応 5.0
topChrome 完全対応 45Edge 完全対応 79Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 32Safari 完全対応 ありWebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 ありOpera Android 完全対応 32Safari iOS 完全対応 ありSamsung Internet Android 完全対応 5.0

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。