프론트엔드 웹/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')
}
})
}, []);
반응형