1. 스크롤 이벤트

일반적으로 웹 문서의 크기가 브라우저의 창 크기보다 클 때, 스크롤 바가 브라우저에 자연스럽게 나타난다.

때문에, 일반적으로, 스크롤 이벤트는 브라우저를 대변하는 window 객체의 이벤트 핸들러를 등록하는 경우가 많다.

function printEvent (e) {
  console.log(e);
}

window.addEventListener('scroll', printEvent);

또한, 이 scroll 이벤트를 활용할 때, 일반적으로는 window 객체의 프로퍼티가 많이 활용된다.

아래 예시와 같이, scrollY라는 프로퍼티를 활용하면, scroll 이벤트가 발생했을 때, 웹 문서의 제일 위쪽에서부터 몇 px만큼 스크롤 했는 지에 대해 파악할 수 있다.

function printEvent (e) {
  console.log(e);
  console.log(window.scrollY);
}

window.addEventListener('scroll', printEvent);

웹에서 스크롤을 내렸을 때, 위로 돌아가는 버튼이 생기는 기능도, 이 scrollY 프로퍼티를 활용한 것이다.

또한, 아래와 같이 코드를 작성하면, 스크롤의 방향을 감지하는 데에도 활용이 가능하다.

if (window.scrollY > lastScrollY) {
  ...	// 스크롤 방향이 아래쪽일 때
} else {
  ...	// 스크롤 방향이 위쪽일 때
}