GlobalEventHandlers.onscroll

onscroll は GlobalEventHandlers ミックスインのプロパティで、 scroll イベントを処理するイベントハンドラー (EventHandler) です。

scroll イベントは、ユーザー、 Web API、ユーザーエージェントの何れかによって文書のビューまたは要素がスクロールしたときに発生します。

注: onscroll を onwheel と混同しないようにしてください。

onwheel は一般的なホイールの回転を扱うのに対し、 onscroll はオブジェクトの内容のスクロールを扱います。

構文

target.onscroll = functionRef

値

functionRef
関数名または関数式です。この関数は引数として一つだけ、 UIEvent オブジェクトを受け取ります。

onscroll ハンドラーは同時に1つだけ割り当てることができます。

柔軟性を高めるために、 scroll イベントを EventTarget.addEventListener() メソッドに渡すことができます。

例

この例では <textarea> のスクロールを監視し、その結果である要素の垂直のスクロール位置をログ出力します。

HTML

<textarea>1 2 3 4 5 6 7 8 9</textarea>
<p id="log"></p>

CSS

textarea {
  width: 4rem;
  height: 8rem;
  font-size: 3rem;
}

JavaScript

const textarea = document.querySelector('textarea');
const log = document.getElementById('log');

textarea.onscroll = logScroll;

function logScroll(e) {
  log.textContent = `Scroll position: ${e.target.scrollTop}`;
}

結果

仕様書

仕様書 状態 備考
HTML Living Standard
onscroll の定義		 現行の標準
Document Object Model (DOM) Level 3 Events Specification
onscroll の定義		 廃止された 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
onscrollChrome 完全対応 ありEdge 完全対応 ≤18Firefox 完全対応 ありIE ? Opera ? Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報