GlobalEventHandlers.onscroll
onscroll
は GlobalEventHandlers
ミックスインのプロパティで、 scroll
イベントを処理するイベントハンドラー (event handler
) です。
scroll
イベントは、ユーザー、 Web API、ユーザーエージェントの何れかによって文書のビューまたは要素がスクロールしたときに発生します。
注: onscroll
を onwheel
と混同しないようにしてください。
onwheel
は一般的なホイールの回転を扱うのに対し、 onscroll
はオブジェクトの内容のスクロールを扱います。
構文
target.onscroll = functionRef
値
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