window.scrollY 화면의 스크롤 위치를 이용하여 이벤트 처리하기

화면이 스크롤되어 일정 위치에 도달하면 요소를 보이지 않게 하고 싶다. 

 

window.scrollY 속성을 이용하면 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환해준다.

 

window.addEventListener(
  'scroll',
  _.throttle(function () {
    console.log(window.scrollY);
    if (window.scrollY > 500) {
      // 배지 숨기기
      badgeEl.style.display = 'none';
    } else {
      // 배지 보이기
      badgeEl.style.display = 'block';
    }
  }, 300)
);

lodash.js를 사용하였다.

화면을 스크롤하면 300ms 간격으로 문서가 수직으로 스크롤 된 크기를 콘솔에 출력하고 500px 넘게 스크롤되었을 경우 

badgeEl 요소를 보이지 않게 하는 코드이다.

 

화면을 위아래로 스크롤 해 보니 스크롤 된 위치가 콘솔에 출력되는 것을 볼 수 있다.

 

좌우는 scrollX 로 확인할 수 있는데 사용할 일이 많지는 않을 것 같다.