스크롤 위치 가져오기

Scroll Event

---

다음과 같은 방식들을 통해 스크롤 위치에 따라 각기 다른 Header 디자인이 랜더링되도록 코드를 구현하였다.

 

scrollTop

window.addEventListener('scroll', (event) => {
    let {scrollTop} = event.target.scrollingElement; //document.documentElement.scrollTop || document.body.scrollTop
    nav.classList.add('active'); //active 클래스 여부에 따라 헤더 디자인이 상이하게 작동
    if(scrollTop <= 50) nav.classList.remove('active');
})

 

scrollY / pageYoffset

window.addEventListener('scroll', function() {
    const top = window.scrollY || window.pageYOffset;
    (top >= 50 )
        ? nav.classList.add('active')
        : nav.classList.remove('active');
})

Window 인터페이스의 scrollY 읽기 전용 속성은 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환합니다.
 최신 브라우저에서는 값의 정밀도가 픽셀보다 작으므로 반드시 정숫값을 반환하는건 아닙니다.

Window 인터페이스의 pageYOffset 읽기 전용 속성은 scrollY 의 다른 이름으로, 문서가 수직으로 얼마나 스크롤됐는지
픽셀 단위로 반환합니다. 일부 오래된 브라우저는 scrollY 대신 pageYOffset 만 지원하는 경우가 있지만, 노후 환경을 신경쓰지
않아도 된다면 둘 중 아무거나 사용해도 괜찮습니다.

 

wheelDelta

const isFireFox = (navigator.userAgent.indexOf('Firefox') !== -1);
const wheelEvt = isFireFox ? 'DOMMouseScroll' : 'wheel';

window.addEventListener(wheelEvt, mouseWheelEvent);

function mouseWheelEvent(e) {
    const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
    (delta < 0)
        ? nav.classList.add('active')
        : nav.classList.remove('active');
}

wheelEvent의 wheelDelta 속성 값은 휠이 얼마나 회전했는지를 나타내는 추상 값이다. 휠이 사용자에게 멀어지면 양수이고 그렇지
않으면 음수이다. 그러나 이러한 값의 양의 의미는 브라우저 간에 동일하지 않다.

하지만 Element: mouseWheel 기능은 관련 웹 표준에서 이미 제거되었거나 삭제 과정에 있기 때문에 더 이상 권장되지 않는다.

 

https://stackoverflow.com/questions/22912661/what-is-the-meaning-of-navigator-useragent-indexof-in-javascript-i-used-this-in

what is the meaning of navigator.userAgent.indexOf in javascript,i used this in my javascript?

---

스크롤 상태 구분하기

let oldValue = 0;
window.addEventListener('scroll', function(){
    const newValue = window.scrollY || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    
    // 음수 : 스크롤 다운
    if(oldValue - newValue < 0) {
        nav.classList.add('active');
    }

    // 양수 : 스크롤 업
    if(oldValue - newValue > 0) {
        nav.classList.remove('active');
    }
    
    oldValue = newValue;
    
    console.log(oldValue, newValue);
});