프로젝트 작업중 마우스휠 이벤트를 사용해보고 싶어서
따로 찾아 작업 후, 기억 및 저장을 해두려고 적어보려 한다.
위의 사진과 같이
마우스를 위로 올릴 때 사이드버튼이 등장
하고
마우스를 아래로 내릴 때 사이드 버튼이 사라지게
하고 싶었다.
- 마우스 휠 이벤트에
originalEvent.deltaY
출력
- 마우스
휠을 위로 올릴때는 양수
가 출력된다.
- 마우스
휠을 아래로 내릴때는 음수
가 출력된다.
(컴퓨터 설정마다 숫자의 크기는 다를 수 있다.)
- 마우스 휠 이벤트는 모바일에서는 구현이 안되고
PC에서만 사용 가능
하다.
<!--js-->
$(window).on("wheel", function (event){
curr= $(this).scrollTop();
if (event.originalEvent.deltaY < 0 && curr > 10) {
$('.side-btn').addClass('show');
// wheel up
}
else {
$('.side-btn').removeClass('show');
// wheel down
}
});
window에 wheel 이벤트를 주었고, curr에 window의 scrollTop 값을 넣어주었다. 그리고 event.originalEvent.deltaY
을 사용,
console.log로 확실하게 결과값을 확인하고, if문으로 코드를 작성하였다.
여기서 끝날게 아니라 휠이벤트가 페이지 상단으로 올라가면 또
거기서도 사라지게 하고 싶었는데, 그 부분은
if (event.originalEvent.deltaY < 0 👉 && curr > 10 👈) {
조건문에 &&
를 사용하여 여러개의 조건문을 수용할 수 있도록 하여
두가지의 조건을 활용할 수 있었다.
모바일로 확인했을 때 적용이 안되는걸 확인한 후 알아보니,
이름답게 mousewheel!!, 모바일에는 마우스 휠을 사용하지 않는단 걸 깨닫고,
모바일에서 비슷한 효과를 낼 수 있는 방법을 적어보았다.
let lastScroll=0;
$(window).scroll(function(){
curr= $(this).scrollTop();
if(curr > 0){
if (curr > lastScroll) {
$('.side-btn').removeClass('show');
} else {
$('.side-btn').addClass('show');
}
}else{
$('.side-btn').removeClass('show');
}
lastScroll=curr;
})
window에 스크롤 효과를 주었고, curr에 window의 scrollTop 값을 넣어주었다.
그 후에 lastScroll이란 변수에 0을 임의로 선언해주었다.
- 스크롤을 하게 되어 curr이 값이 100이 되었다고 가정한다면
현재값이 0인 lastScroll보다 크게되어$('.side-btn').removeClass('show');
이 실행이 되고, 그후에 스크롤이 100이 된 값을 lastScroll에 넣어준다.
- 다시 스크롤을 하게 되어서, 100이된 lastScroll보다 curr이 값이 작아지게 된다면,
$('.side-btn').removeClass('show');
가 실행이 되게 된다.
좋은 정보 얻어갑니다, 감사합니다.