GlobalEventHandlers.onscroll
document view 나 element 가 스크롤이 됬을 때 이벤트가 발생합니다.
Note: onscroll
과 onwheel
(en-US) 이벤트를 혼동하지 마세요. onwheel
보통 휠의 회전을 처리하고, onscroll
은 객체의 내용의 스크롤을 처리합니다.
Syntax
target.onscroll = functionRef;
Value
functionRef
은(는) 함수 표현식 또는 함수 이름 이며, 이 객체는 오직 UIEvent
(en-US) 객체만 인수로 받습니다.
오직 하나의 onscroll
이벤트만 하나의 객체에 할당 할 수 있습니다. EventTarget.addEventListener()
를 사용하여 scroll
이벤트를 정의 할 수 있습니다.
Example
다음 예제는 <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}`;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'onscroll' in that specification. |
Living Standard | |
Document Object Model (DOM) Level 3 Events Specification The definition of 'onscroll' in that specification. |
Obsolete | Initial definition |
Browser compatibility
BCD tables only load in the browser