[javascript] scroll event

1 스크롤 이벤트란?

---

document view나 element가 스크롤 될 때 발생하는 이벤트.

 

◾ 스크롤 이벤트에서 주의할 점

스크롤 이벤트는 한번 실행될 때 매우 빠른 속도로 실행된다. 이것을 눈으로 확인해보기 위해 테스트를 해보았다.

 

    document.addEventListener('scroll', function(){
        console.log('event call');
    })

스크롤 이벤트가 발생되면 콘솔에 event call이 찍히도록 해보았다.

스크롤을 한번만 했을 뿐인데 11번이나 실행되며

만약 이벤트리스너 안에 복잡한 DOM 조작을 넣는다면 컴퓨터는 당연히 느려질 수 밖에 없을 것이다.

 

그래서 스크롤 이벤트에서는 복잡한 작업을 실행하지 말아야 한다.

그렇다면 이것을 해결할 방법은 없을까?

 

◾ 스크롤 이벤트 최적화 방법

마구 실행되는 이벤트의 발생을 제한하기 위한 방법들을 찾아보았다.

 

1 throttle/debounce

2 requestAnimationFrame(rAF)

3 setTimeout()

4 customEvent

5 Observer API

[JavaScript] Intersection Observer API 정리

 

자세히 보려고하니... DOM 에 대한 이해가 필요해보여서 공부한 뒤 다시 자세히 알아보도록 하겠다.

 

2 스크롤 이벤트 예제

---

스크롤시 RGB color 값 변화시키기

혼자서 생각해본 예시인데 스크롤시 값의 변화가 크고

스크롤시 값의 변화가 0~255 사이어야 하는데 그것을 맞추기 어려웠다.

See the Pen Untitled by yanggjoy (@yanggjoy) on CodePen.

 

그래서 코드펜에서 스크롤이벤트를 좀 더 자연스럽게 만드는 코드를 참조해서 다시 만들었다.

See the Pen Untitled by yanggjoy (@yanggjoy) on CodePen.

 

 

 

현재 scroll top 값을 구해 현재 wrapper의 높이값을 나눠 360을 곱해주니

스크롤했을 때 0~251까지의 숫자가 스크롤했을 때 자연스럽게 올라가는 값을 구할 수 있었다.