[JavaScript] wheel event를 scroll event로 바꾸기

하민·2024년 1월 23일

전에 만들던 프로젝트의 사이트 헤더를 아래로 스크롤 할 경우엔 사라지게 하면서, 위로 스크롤 할 때 다시 나타나도록 만들어뒀었는데..... wheel event를 기본으로 해두는 바람에 아이패드 사이즈에선 적용이 안된다는 걸 이제야 알았다🥲 분명 처음 만들 때 scroll event랑 wheel event가 다름을 인지하고 만들었을텐데 마무리가 부실했다

그래서 지금이라도 고쳐보려고! 일단 wheel을 scroll로 바꾸고 좌표를 구하는 것만 바꿨는데.. 될 줄 알았는데 안 되더라,,(;′⌒`)

// header fixed scroll
    window.addEventListener('wheel', e => {
        const headerTopWrap = document.querySelector('#header_top_wrap');
        const headerTop = document.querySelector('#header_top');
        let headerScroll = window.scrollY;
        let headerWheel = e.deltaY > 0;

        if (headerScroll > 700) {
            headerTopWrap.style.backgroundColor = '#f6f6f6';
        } else {
            headerTopWrap.style.backgroundColor = '#f6f6f600';
        };

        if (headerWheel) {
            headerTopWrap.style.top = '-12vh';
            headerTop.style.top = '-12vh';
        } else {
            headerTopWrap.style.top = '0';
            headerTop.style.top = '0';
        };

    });

일단 원래 코드는 이런 상태였는데



해결!
profile
ദ്ദി '֊' )

0개의 댓글