현재 스크롤Y값 구하기

브라우저에서 현재 scrollY 값을 구하는 방법에 대해서 알아보겠습니다.

 

 

window.pageYOffset === window.scrollY; //true

window 안의 document가 수직 방향으로 스크롤된 거리를 픽셀 단위로 나타낸 부동소수점 수를 반환합니다.

단일 픽셀보다 높은 수준의 정밀도를 가지므로 정수가 아닐 수 있습니다.

window.pageYOffset과 window.scrollY 속성값은 같습니다.

scrollY는 오래된 브라우저는 지원이 안 되는 경우가 있으므로, pageYOffset이 하위 브라우저 지원까지 안전합니다.

 

 

스크롤 위아래 방향 판단하기

스크롤될 수 있도록 높이값을 설정해줘야 합니다.

body{
  height: 300vh; /* 스크롤될 수 있도록 높이값 설정하기 */
}

스크롤(scroll)할 때, 스크롤 Y(scrollY) 값으로 스크롤 방향을 알아내는 코드는 다음과 같습니다.

let prevPageYOffset; //이전 스크롤Y 값
let scrollDirection; //스크롤 방향

window.addEventListener('scroll', () => {
    //판단하기
    if(prevPageYOffset > window.pageYOffset){
        scrollDirection = 'up';
    } else {
        scrollDirection = 'down';
    }
    prevPageYOffset = window.pageYOffset;
    console.log(scrollDirection);
});

 

 

 

이렇게 현재 스크롤된 위치값에 대해서 알아보았습니다.

 

 

 

 

🏷 출처

MDN