Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Scroll methods on elements

scroll イベントは、文書のビューまたは要素がスクロールされたときに発生します。 スクロールが完了したことを検出するには、 Document: scrollend イベントを参照してください。 要素のスクロールには、 Element: scroll イベントを参照してください。

表示・ナビゲーション

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
scroll_event
1
12
6
2
18
1
scrollingElement

scrollingElement は、Document インターフェイスの読み込み専用プロパティです。スクロール可能な Element の参照を返します。標準モードでは、文書のルート要素である document.documentElement になります。
44
12
48
9
44
9
scroll

scroll() は Element インターフェイスのメソッドで、指定された要素内の特定の座標の組まで要素をスクロールさせます。
61
79
36
10.1
61
10.3
scroll_event

scroll イベントは、要素がスクロールしたときに発行されます。 スクロールの終了を検出するには、 Element の Element/scrollend_event イベントを参照してください。
1
12
6
1.3
18
1
scroll (options behavior parameter)

`options.behavior` パラメータ
61
79
36
14
61
14
scroll (options left parameter)

`options.left` パラメータ
61
79
36
10.1
61
10.3
scroll (options top parameter)

`options.top` パラメータ
61
79
36
10.1
61
10.3
scrollBy

scrollBy() は Element インターフェイスのメソッドで、指定された量だけ要素をスクロールします。
61
79
36
10.1
61
10.3
scrollBy (options behavior parameter)

`options.behavior` パラメータ
61
79
36
14
61
14
scrollBy (options left parameter)

`options.left` パラメータ
61
79
36
10.1
61
10.3
scrollBy (options top parameter)

`options.top` パラメータ
61
79
36
10.1
61
10.3
scrollHeight

Element.scrollHeight は読み取り専用のプロパティで、あふれて画面上に表示されない部分を含めた、要素の内容の高さの寸法です。
1
12
21
1
18
1
scrollLeft

Element.scrollLeft プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。
86
86
1
1
86
1
scrollTo

scrollTo() は Element インターフェイスのメソッドで、指定された要素内を指定された座標までスクロールします。
61
79
36
10.1
61
10.3
scrollTo (options behavior parameter)

`options.behavior` パラメータ
61
79
36
14
61
14
scrollTo (options left parameter)

`options.left` パラメータ
61
79
36
10.1
61
10.3
scrollTo (options top parameter)

`options.top` パラメータ
61
79
36
10.1
61
10.3
scrollTop

Element.scrollTop プロパティは、要素の内容が垂直にスクロールするピクセル数を取得または設定します。
1
12
1
1
18
1
scrollWidth

Element.scrollWidth は読み取り専用のプロパティで、あふれたために画面に表示されない部分を含めた、要素の中身の幅の寸法です。
1
12
1
1
18
1
scroll

Window.scroll() メソッドは、ウィンドウを文書内の特定の位置までスクロールさせます。
1
12
1
1
18
1
scroll (options behavior parameter)

`options.behavior` パラメータ
61
79
36
14
61
14
scroll (options left parameter)

`options.left` パラメータ
41
79
36
10.1
41
10.3
scroll (options top parameter)

`options.top` パラメータ
41
79
36
10.1
41
10.3
scrollBy

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

`options.behavior` パラメータ
61
79
36
14
61
14
scrollBy (options left parameter)

`options.left` パラメータ
41
79
36
10.1
41
10.3
scrollBy (options top parameter)

`options.top` パラメータ
41
79
36
10.1
41
10.3
scrollTo

Window.scrollTo() は文書内の特定の座標までスクロールします。
1
12
1
1
18
1
scrollTo (options behavior parameter)

`options.behavior` パラメータ
61
79
36
14
61
14
scrollTo (options left parameter)

`options.left` パラメータ
41
79
36
10.1
41
10.3
scrollTo (options top parameter)

`options.top` パラメータ
41
79
36
10.1
41
10.3
scrollX

scrollX は Window インターフェイスの読み取り専用プロパティで、文書が現在水平方向にスクロールしているピクセル数を返します。最近のブラウザーでは、この値はサブピクセル精度ですので、必ずしも整数であるとは限りません。文書が垂直方向にスクロールしているピクセル数は Window.scrollY プロパティで取得できます。
1
12
1
1
18
1
scrollX (subpixel precision)

サブピクセル精度
40
≤18
55
40
scrollY

scrollY は Window インターフェイスの読み取り専用プロパティで、文書が現在垂直方向にスクロールしているピクセル数を返します。最近のブラウザーでは、この値はサブピクセル精度ですので、必ずしも整数であるとは限りません。文書が水平方向にスクロールしているピクセル数は Window.scrollX プロパティで取得できます。
1
12
1
1
18
1
scrollY (subpixel precision)

サブピクセル精度
40
≤18
55
40
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (21)
実装メモ
  • Firefox 21以前では、要素の内容が垂直スクロールバーを生成しない場合、その `scrollHeight` プロパティは `clientHeight` プロパティと同じ値になります。 これは、コンテンツが短すぎてスクロールバーが必要ないか、またはその要素の CSS スタイル `overflow` の値が `visible`（スクロール不可）に設定されていることを意味します。
注釈 2件
削除済み
  • このバージョンで機能が削除されました (86)
実装メモ
  • 右から左への要素の場合、このプロパティは負の値ではなく0～100（左端から右端）を使用します。バグ41319147を参照してください。
注釈 2件
削除済み
  • このバージョンで機能が削除されました (86)
実装メモ
  • 右から左への要素の場合、このプロパティは負の値ではなく0～100（左端から右端）を使用します。バグ41319147を参照してください。
注釈 2件
削除済み
  • このバージョンで機能が削除されました (86)
実装メモ
  • 右から左への要素の場合、このプロパティは負の値ではなく0～100（左端から右端）を使用します。バグ41319147を参照してください。
注釈 1件
実装メモ
  • Safariでは、`smooth`スクロール機能はサポートされていません。
注釈 1件
実装メモ
  • iOS版のSafariでは、`smooth`スクロール機能はサポートされていません。
注釈 1件
実装メモ
  • Safariでは、`smooth`スクロール機能はサポートされていません。
注釈 1件
実装メモ
  • iOS版のSafariでは、`smooth`スクロール機能はサポートされていません。
注釈 1件
実装メモ
  • バージョン15.4以前のSafariでは、`smooth`スクロール動作はサポートされていませんでした。
注釈 1件
実装メモ
  • バージョン15.4以前、iOS版のSafariでは`smooth`スクロール動作がサポートされていませんでした。
注釈 1件
対応条件
  • 以前は別名で対応していました: pageXOffset (1)
注釈 1件
対応条件
  • 以前は別名で対応していました: pageXOffset (12)
注釈 1件
対応条件
  • 以前は別名で対応していました: pageXOffset (1)
注釈 1件
対応条件
  • 以前は別名で対応していました: pageXOffset (1)
注釈 1件
対応条件
  • 以前は別名で対応していました: pageXOffset (18)
注釈 1件
対応条件
  • 以前は別名で対応していました: pageXOffset (1)
注釈 1件
対応条件
  • 以前は別名で対応していました: pageYOffset (1)
注釈 1件
対応条件
  • 以前は別名で対応していました: pageYOffset (12)
注釈 1件
対応条件
  • 以前は別名で対応していました: pageYOffset (1)
注釈 1件
対応条件
  • 以前は別名で対応していました: pageYOffset (1)
注釈 1件
対応条件
  • 以前は別名で対応していました: pageYOffset (18)
注釈 1件
対応条件
  • 以前は別名で対応していました: pageYOffset (1)

基本構文

JAVASCRIPT 
addEventListener("scroll", (event) => { })

onscroll = (event) => { }

実務での使いどころ

  • Scroll methods on elements の活用

    scroll イベントは、文書のビューまたは要素がスクロールされたときに発生します。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク