scroll
document view 나 element가 스크롤 될 때, scroll
이벤트가 발생합니다.
개요
속성
속성 | 타입 | 설명 |
---|---|---|
target 읽기 전용 |
EventTarget |
이벤트 대상 (DOM 트리의 최상위 타겟) |
type 읽기 전용 |
DOMString |
이벤트의 타입 |
bubbles 읽기 전용 |
Boolean |
이벤트가 버블이 되는지 |
cancelable 읽기 전용 |
Boolean |
이벤트 취소가 가능한지 |
view 읽기 전용 |
WindowProxy |
Document.defaultView (document의 window ) |
detail 읽기 전용 |
long (float ) |
0 . |
예제
스크롤 이벤트의 조절
scroll
이벤트가 빠른 속도로 실행될 수 있기 때문에, 이벤트 핸들러는 DOM 수정과 같이 느린 작업을 실행하지 말아야 합니다. 대신, 다음을 사용하여 이벤트를 제한하는 것을 권장합니다.
requestAnimationFrame()
, setTimeout()
, 혹은, CustomEvent
그러나 입력 이벤트와 애니메이션 프레임은 거의 동일한 속도로 실행되므로 아래 최적화는 종종 불필요합니다. 다음은 requestAnimationFrame
에 대한 scroll
이벤트를 최적화하는 예제입니다.
js
// 참조: http://www.html5rocks.com/en/tutorials/speed/animations/
let last_known_scroll_position = 0;
let ticking = false;
function doSomething(scroll_pos) {
// scroll 위치에 대한 작업을 하세요
}
window.addEventListener("scroll", function (e) {
last_known_scroll_position = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function () {
doSomething(last_known_scroll_position);
ticking = false;
});
ticking = true;
}
});
명세서
Specification |
---|
CSSOM View Module # eventdef-document-scroll |
HTML Standard # handler-onscroll |
브라우저 호환성
BCD tables only load in the browser