프로젝트 작업중 마우스휠 이벤트를 사용해보고 싶어서
따로 찾아 작업 후, 기억 및 저장을 해두려고 적어보려 한다.

위의 사진과 같이
마우스를 위로 올릴 때 사이드버튼이 등장 하고
마우스를 아래로 내릴 때 사이드 버튼이 사라지게 하고 싶었다.

---

1. mousewheel 사용방법

• 마우스 휠 이벤트에 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 👈) { 

조건문에 &&를 사용하여 여러개의 조건문을 수용할 수 있도록 하여
두가지의 조건을 활용할 수 있었다.

---

2. 모바일에서 사용할 때

모바일로 확인했을 때 적용이 안되는걸 확인한 후 알아보니,
이름답게 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을 임의로 선언해주었다.

1. 스크롤을 하게 되어 curr이 값이 100이 되었다고 가정한다면
   현재값이 0인 lastScroll보다 크게되어 $('.side-btn').removeClass('show'); 이 실행이 되고, 그후에 스크롤이 100이 된 값을 lastScroll에 넣어준다.
   
   
2. 다시 스크롤을 하게 되어서, 100이된 lastScroll보다 curr이 값이 작아지게 된다면,
   $('.side-btn').removeClass('show'); 가 실행이 되게 된다.