[다양한 이벤트 알아보기] 12.스크롤 이벤트

웹 페이지를 이용하다 보면 다양한 상황에서 스크롤바를 만나게 됩니다.

css를 통해서 의도적으로 스크롤이 있는 요소를 만들지 않는 이상 일반적으로는 웹 문서의 크기가 브라우저의 창 크기보다 클 때 브라우저에 자연스럽게 나타납니다.

//Scroll 이벤트
function printEvent(e) {
  console.log(e);
}

window.addEventListener('scroll', printEvent);

그래서 일반적으로 스크롤 이벤트는 브라우저를 대변하는 윈도우 객체의 이벤트 핸들러를 등록하는 경우가 많습니다.

코드를 실행해보면 웹 문서가 스크롤 될 때 이벤트 핸들러가 동작하는 모습을 확인할 수 있습니다.

그리고 이 스크롤 이벤트를 활용할 때 일반적으로는 윈도우 객체의 프로퍼티가 많이 활용되는데요.

//Scroll 이벤트
let lastScrollY = 0;

function printEvent(e) {
  const STANDARD = 30;

  const nav = document.querySelector('#nav');
  const toTop = document.querySelector('#to-top');
  
  if (window.scrollY > STANDARD) { // 스크롤이 30px을 넘었을 때
   nav.classList.add('shadow');
   toTop.classList.add('show');
  } else { // 스크롤이 30px을 넘지 않을 때
    nav.classList.remove('shadow');
    toTop.classList.remove('show');
  }
  
  if (window.scrollY > lastScrollY) { // 스크롤 방향이 아랫쪽 일 때
    nav.classList.add('lift-up');
  } else { // 스크롤 방향이 윗쪽 일 때
    nav.classList.remove('lift-up');
  }
  
  lastScrollY = window.scrollY;
}

window.addEventListener('scroll', printEvent);

이런 식으로 scrollY라는 프로퍼티를 활용하면 저장하고 실행했을 때 이렇게 스크롤이 발생했을 때 웹 문서의 제일 위쪽에서부터 몇 픽셀만큼 스크롤 했는지를 파악할 수 있습니다.

 

그래서 코드를 이런 식으로 어떤 특정한 기준을 가지고서 DOM 요소를 다룰 수도 있는데요. scrollY 프로퍼티를 이용해서 프로퍼티 값이 기준값 이상이면 각 요소에 어떤 클래스를 추가하고 그렇지 않으면 클래스를 제거하는 방식으로 코드를 실행해보면 이렇게 30px 정도 스크롤을 하면 메뉴바에 그림자가 생기고 새로운 버튼도 나타납니다. 그리고 다시 30px 이하로 스크롤이 올라가면 원래대로 돌아오는 모습도 볼 수 있습니다.

 

혹은 함수 밖에서 변수를 하나 만들고 그리고 아랫부분에 이런 식으로 코드를 작성해주면 직전에 스크롤 이벤트의 scrollY 프로퍼티 값을 담게 되니까 이 값으로 스크롤의 방향을 감지하는 데도 활용할 수가 있습니다.

 

이렇게 하면 스크롤을 내리는 상황에서는 메뉴바가 올라가고 스크롤을 올리는 상황에서는 다시 내려옵니다.

스크롤 이벤트를 이런 식으로도 활용할 수 있으니까 참고해두면 좋을 것 같습니다.