GlobalEventHandlers.onscroll

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

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

構文

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}`;
}

結果

仕様書

ブラウザーの互換性

関連情報

• Document: scroll イベント
• Element: scroll イベント