Window scrollBy() メソッド

定義と使用法

scrollBy() メソッドは指定されたピクセル数でドキュメントをスクロールします。

ヒント：するためには、 scrollBy() メソッドが効果を発揮するためには、ドキュメントがスクリーンより大きくて、スクロールバーが表示されている必要があります。

参照もどうぞ：

scrollTo() メソッド

例

例 1

水平にドキュメントを100pxスクロール：

window.scrollBy(100, 0);

自分で試してみてください

例 2

垂直にドキュメントを100pxスクロール：

window.scrollBy(0, 100);

自分で試してみてください

例 3

ドキュメントの上下スクロール：

<button onclick="scrollWin(0, 50)">下にスクロール</button>
<button onclick="scrollWin(0, -50)">上にスクロール</button>
<script>
function scrollWin(x, y) {
  window.scrollBy(x, y);
}
</script>

自分で試してみてください

例 4

ドキュメントの左右スクロール：

<button onclick="scrollWin(100, 0)">右にスクロール</button>
<button onclick="scrollWin(-100, 0)">左にスクロール</button>
<script>
function scrollWin(x, y) {
  window.scrollBy(x, y);
}
</script>

自分で試してみてください

構文

window.scrollBy(x, y)

または：

scrollBy(x, y)

パラメータ

パラメータ 説明
x

必須。スクロールするピクセル数（水平）。

向右スクロール、向左スクロールです。
y

必須。スクロールするピクセル数（垂直）。

正の値は下にスクロールし、負の値は上にスクロールします。

返り値

無。

ブラウザのサポート

すべてのブラウザがサポートしています scrollBy()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート サポート サポート サポート サポート サポート