GlobalEventHandlers.onscroll

GlobalEventHandlers 의 onscroll 이벤트는 EventHandler 의 scroll 이벤트를 상속받았습니다.
document view 나  element 가 스크롤이 됬을 때 이벤트가  발생합니다.

Note: onscrollonwheel 이벤트를 혼동하지 마세요. onwheel 보통 휠의 회전을 처리하고, onscroll은 객체의 내용의 스크롤을 처리합니다.

Syntax

target.onscroll = functionRef;

Value

functionRef 은(는) 함수 표현식 또는 함수 이름 이며, 이 객체는 오직 UIEvent 객체만 인수로 받습니다.

오직 하나의 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
onscrollChrome Full support YesEdge Full support YesFirefox Full support YesIE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

See also