[Javascript] 스크롤 방향 감지하기 (위/아래 방향 알아내기) ↕️

 

내 스크롤이 위로 가는가... 아래로 가는가...

알려주세요 Javascript 님...🙂

 

요즘 사이트들을 보면 스크롤을 올릴때, 혹은 내릴 때 숨겨지는 네비게이션, 버튼들이 자주 보인다.

그리고 내 포트폴리오에도 그 기능을 넣어야했다.

그래서 공부하게 된 마우스 스크롤 방향 감지하기

 

---

 

Javascript 코드

// 이전 스크롤 위치를 변수에 담는다.
let lastScrollY = 0;

// 윈도우 스크롤 이벤트 (스크롤을 했을 때 발생)
window.addEventListener("scroll", (e) => {
  // 현재 스크롤 위치(스크롤을 했을 경우 위치)를 변수에 담는다.
  let currentScrollY = window.scrollY;

  // 이전 스크롤 위치(Y)가 현재 스크롤 위치(Y)보다 작을 경우 (스크롤 DOWN)
  if (lastScrollY < currentScrollY ? ) {
    console.log("스크롤 DOWN");
  }
  // 이전 스크롤 위치가 현재 스크롤 위치보다 클 경우 (스크롤 UP)
  if (lastScrollY < currentScrollY) {
    console.log("스크롤 UP");
  }
  
  // 위 두개를 축약해서 사용하면 이렇게도 사용할 수 있다. (삼항연산자 사용)
  lastScrollY < currentScrollY ? console.log("스크롤 DOWN") : console.log("스크롤 UP");

  // 이전 스크롤 위치에 현재 스크롤 위치를 저장한다.
  // -> 이 이벤트 다음에 스크롤을 했을 때 현재 있는 위치에서 위에 있는지 아래에 있는지 알기 위해.
  lastScrollY = currentScrollY;
});

 

요즘 계속 변수를 선언할 때 습관적으로 const를 사용하곤 했는데

그래서인지 처음 스크롤 위치를 변수에 담을 때 const 를 사용해서 에러가 났었다.

습관이란 참 무섭구나

다음부턴 유의해야지!

 

 

- 끝 -