자바스크립트에서 마우스의 스크롤 이벤트를 사용하는 경우 만약 마우스 스크롤의 방향을 알려면 어떻게 알 수 있는지 알아봅니다.





# 자바스크립트 마우스 스크롤 방향 알기
마우스 스크롤을 방향을 알기 위해서 가장 많이 사용되는 방법이 바로 스크롤 위치의 이전 값을 전역 변수로 저장하는 방법입니다.

다시 말하면 현재 스크롤 위치와 직전 스크롤 위치를 비교해 값이 커지고 있는지 아니면 작아지고 있는지 확인하여 방향을 알 수 있습니다. 이 값은 양수(+), 음수(-) 또는 0이 나타날 것입니다. 순서대로 나타내면...

1. 스크롤 이벤트가 발생하면 이 전 값을 확인
2. 이 전 값보다 커지면 스크롤이 아래 방향임
3. 이 전 값보다 작아지면 스크롤이 위 방향임
4. 방향을 확인 후 현재 스크롤 값을 계속 업데이트

위 순서대로 입니다. 그럼 코드를 작성하여 알아보겠습니다.



! 마우스 스크롤 방향을 알아내는 예제
스크롤을 이동했을 때 현재 어떤 방향으로 이동하는지를 콘솔창에 출력해서 보여주는 예제를 만들었습니다. 아래코드를 실행한 뒤 스크롤을 움직이면 1 또는 -1을 출력됩니다.
// Save a current position in global
window.__scrollPosition = document.documentElement.scrollTop || 0;


document.addEventListener('scroll', function() {
  let _documentY = document.documentElement.scrollTop;
  let _direction = _documentY - window.__scrollPosition >= 0 ? 1 : -1;
  console.log(_direction); // 콘솔창에 스크롤 방향을 출력

  window.__scrollPosition = _documentY; // Update scrollY
});

이제 마우스 스크롤을 위로 올려봅니다. 아래처럼 -1이 출력되죠. 반대로 스크롤을 내려면 1이 출력되게 됩니다.

여기서 중요한 부분은 스크롤 이벤트의 기존 값을 전역변수로 저장했다는 점입니다. 전역변수를 사용하지 않으려면 클로저를 사용해 private 변수를 만들어 사용할 수도 있을 것입니다.


! 위 예제 실제로 구현해보기
아래는 위 예제를 실제로 구현하고 그 결과를 아래의 박스 영역에 출력하였습니다. 스크롤을 바꾸면서 어떻게 값이 변하는지 확인할 수 있습니다. 여기까지 마우스 스크롤 방향을 알아내는 방법에 대하여 알아봤습니다.

0