[JS] 스크롤 방향 감지

스크롤 방향 감지

---

스크롤 이벤트를 사용하는 경우가 많이 있는데 이때, 2가지 방법을 사용할 수가 있습니다.
바로 wheel event 와 scroll event 입니다.

wheel 이벤트를 쓰면 간단하지만 키보드의 방향키로도 스크롤을 제어하는 경우가 있을 수 있기 때문에 통상적으로는 scroll 이벤트를 많이 씁니다.

저는 이솝사이트를 클론코딩하는 과정에서 wheel 이벤트와 scroll 둘 다 사용해 보았는데 확실히 제어하기에도 간단하고 코드의 길이도 짧아지는 장점이 있었습니다.
하지만 모바일 환경에서는 터치로 스크롤을 할때 적용되지 않는다는 점이나 마우스 가운데 스크롤 버튼을 눌렀을 때는 감지가 되지 않는 문제 때문에 최종적으로는 scroll 이벤트를 사용하게 되었습니다.

wheel event

---

wheel 이벤트는 사용자가 마우스에서 휠 버튼을 회전할 때 발생합니다.

window.addEventListener('wheel',(event) => {
	let wheel = event.wheelDeltaY;
  
	if(wheel > 0) {
      console.log('Up!');
    }
	else { // (wheel < 0)
      console.log('Down!');
    }
	preScrollTop = nextScrollTop;
});

wheelDeltaY 은 마우스휠의 Y축 즉, 세로 스크롤 양을 Double 자료형의 숫자로 반환합니다.

• 위로 스크롤 : 음수(-) 숫자를 반환
• 아래로 스크롤 : 양수(+) 숫자를 반환
• 스크롤 ❌ : 0을 반환

💡 mousewheel 이벤트는 비표준이므로 wheel 이벤트로 사용해주어야 합니다.

scroll event

---

let preScrollTop = 0;

window.addEventListener('scroll',() => {
  	let nextScrollTop = window.scrollY;
  
	if(preScrollTop < nextScrollTop) {
      console.log('Down!');
    }
	else { // (preScrollTop > nextScrollTop)
      console.log('Up!');
    }
	preScrollTop = nextScrollTop;
});