프론트엔드 웹/React

addEventLister scroll / wheel

세리둥절 2023. 6. 14. 19:45
반응형

스크롤 이벤트

   useEffect(() => {
        var beforePosition = document.documentElement.scrollTop;
        window.addEventListener('scroll', function() {
                
        var afterPosition = document.documentElement.scrollTop;
        if (afterPosition > 50) {
            if(beforePosition < afterPosition ){
                // 스크롤 아래로
                console.log('scrollDown')
            } else {
                // 스크롤 위로
                console.log('scrollUp')
            }

            } else {
                // 평상 시
            }
        beforePosition = afterPosition;
    })
}, []);

 

휠 이벤트

useEffect(() => {
        window.addEventListener('wheel', function(e) {
            if (e.deltaY > 0) {
                console.log('scrollDown')
            } else {
                console.log('scrollUp')
            }
        })
    }, []);
반응형