[JS] 스크롤 방향 감지하기

 

 

아래로 이동하고 있는지, 위로 이동하고 있는지를 scroll 이벤트로 감지할 수 있습니다.

 

예제 코드

 

이전 위치를 기록하여 비교하기

let lastScrollY = 0;

addEventListener("scroll", e => {
  const scrollY = window.scrollY;
  
  // 이전의 스크롤 위치와 비교하기
  const direction = scrollY > lastScrollY ? "Scroll Down" : "Scroll Up";
  
  // 현재의 스크롤 값을 저장
  lastScrollY = scrollY;
  
  console.log(direction);
});

현재의 scroll 된 위치는 window.scrollY으로 값을 가져올 수 있습니다.

 

해당 값을 이전에 저장한 현 스크롤 값과 비교, 현 스크롤 값이 더 크면 이전보다 아래로 내려왔다는 뜻이므로 방향을 Down이 될 것입니다.

 

mousewheel 이벤트로 구현하기

addEventListener("mousewheel", e => {
  const direction = e.deltaY > 0 ? "Scroll Down" : "Scroll Up";
  
  console.log(direction);
});

휠 이벤트(mousewheel)에 담겨 있는 deltaY의 값으로 현재 휠의 방향을 판단할 수 있습니다.

 

deltaY의 값이 양수이면 해당 값만큼 휠을 아래로 이동했다는 뜻 (음수는 반대로 올렸다는 뜻)

 

addEventListener("mousewheel", e => {
  const direction = e.deltaY > 0 ? "Scroll Down" : "Scroll Up";
  
  // 방향과 현 스크롤 위치
  console.log(direction, window.scrollY);
});

해당 이벤트로 더욱 간단히 방향을 구할 수 있으며, scroll 이벤트가 아니어도 현재 위치한 스크롤 위치를 가져올 수도 있습니다.