GlobalEventHandlers.onscroll

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

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

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

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

構文

target.onscroll = functionRef

値

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

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

柔軟性を高めるために、 scroll (en-US) イベントを 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 の定義	廃止	初回定義

ブラウザーの互換性

BCD tables only load in the browser