このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Window: scrollBy() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

Window.scrollBy() メソッドは、ウィンドウ内の文書を指定された量だけスクロールさせます。

構文

js
scrollBy(xCoord, yCoord)
scrollBy(options)

引数

xCoord

スクロールさせたい水平方向のピクセル数です。

yCoord

スクロールさせたい垂直方向のピクセル数です。

options

以下のプロパティを持つオブジェクトです。

top

ウィンドウまたは要素をスクロールする Y 軸方向のピクセル数を指定します。

left

ウィンドウまたは要素をスクロールする X 軸方向のピクセル数を指定します。

behavior

スクロールを滑らかにアニメーションさせるか (smooth)、瞬時に一回のジャンプで行うか (instant)、あるいはブラウザーに選択させるか (auto, デフォルト値) を指定することができます。

返値

なし (undefined)。

1 ページ分下スクロールさせるには、次のようにします。

js
window.scrollBy(0, window.innerHeight);

上スクロールさせるには、次のようにします。

js
window.scrollBy(0, -window.innerHeight);

options を使用します。

js
window.scrollBy({
  top: 100,
  left: 100,
  behavior: "smooth",
});

メモ

window.scrollBy() は特定の量だけスクロールしますが、 window.scroll() は文書内の絶対位置までスクロールします。 window.scrollByLines() および window.scrollByPages() も参照してください。

仕様書

仕様書
CSSOM View Module
# dom-window-scrollby

ブラウザーの互換性