반응형
스크롤 이벤트
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')
}
})
}, []);
반응형
'프론트엔드 웹 > React' 카테고리의 다른 글
gsap에서 배경 sticky하게 하고 애니메이션 적용 (+) multiple element에 동시에 애니메이션 효과 적용 (1) | 2023.06.15 |
---|---|
마우스휠 사용하는 Swiper에서 특정 SwiperSlide에서는 마우스휠 멈추기 (0) | 2023.06.14 |
dom-to-image를 이용하여 컴포넌트를 jpeg/png 파일로 만든 뒤, formData 형식으로 API Post하기 (0) | 2023.05.25 |
React svg 파일 색깔 변경 (color change) (0) | 2023.05.04 |
React Image Component Export to PNG/JPEG/SVG (0) | 2023.05.03 |