JS mousewheel 이벤트

김종민·2023년 8월 3일
0

js

목록 보기
11/25
post-thumbnail

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


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


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'); 가 실행이 되게 된다.
profile
웹 퍼블리셔의 코딩 일기

2개의 댓글

comment-user-thumbnail
2023년 8월 3일

좋은 정보 얻어갑니다, 감사합니다.

1개의 답글

관련 채용 정보