자바스크립트 스크롤 이벤트

스크롤 이벤트

  • document view나 element가 스크롤될 때 이벤트가 발생.
  • 스크롤 이벤트는 빈번히 발생하기 때문에 DOM 수정과 같은 연산이 많은 작업은 하지 않아야 함.
  • requestAnimationFrame, setTimeout, customEvent를 사용하여 이벤트 호출 조절을 추천. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/

var last_known_scroll_position = 0;
var ticking = false;

function doSomething(scroll_pos) {
  // do something with the scroll position
}

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;

  }
  
});