[제이쿼리(jQuery) UI] 마우스휠이벤트 1. 마우스 휠 이벤트 를 알아보자. - 회복맨 블로그

[제이쿼리(jQuery) UI] 마우스휠이벤트 1. 마우스 휠 이벤트 를 알아보자.

마크업 부터 시작하는 UI/마우스 휠 사용한 UI 2015. 9. 20. 22:57

마우스 휠을 이용하여 이벤트를 만들어 봅시다.

이 장에서는 마우스 휠에 대한 이론을 살펴 보도록 합시다.


예제용 UI를 찾아보려고 했는데 도통 간단한게 없어서 일단 예를 보여드리도록 하겠습니다.



마우스 휠을 아랫방향으로 했을 때에는 -120

마우스 휠을 윗 방향으로 했을 때에는 120 이라는 숫자가 뜨죠?


이해를 돕기 위해 js 피들의 javascript 탭에 주석으로 달아 놓긴 했지만

다시한번 글을 적어보도록 하겠습니다.


일단 제가 설치한 브라우저는

크롬(Chrome), 익스(IE), 파이어폭스(Firefox) 기준으로 말씀드리겠습니다.


다른 브라우저는 테스트 해보진 않았지만 아마도(죄송합니다.. ㅠㅠ)

익스, 크롬, 사파리, 오페라 의 경우엔

mousewheel 이라는 이벤트를 사용할 수 있고


파이어폭스 의 경우엔

DOMMouseScroll 이라는 이벤트를 사용할 수 있습니다.


즉... 파이어 폭스는 mousewheel 이라는 이벤트가 없기 때문에

mousewheel 과 DOMMouseScroll 이벤트 두개를 동시에 걸어주는 메서드인 .on() 를 사용해야 합니다.




스크린샷을 찍어보면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style></style>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
            $("html, body").on('mousewheel DOMMouseScroll'function(e) {
                var E = e.originalEvent;
                delta = 0;
                console.log(E);
                if (E.detail) {
                    delta = E.detail * -40;
                    $('body').text(delta);
                }else{
                    delta = E.wheelDelta;
                    $('body').text(delta);
                };
            });
        });
   </script>
</head>
<body>
    
</body>
</html>
cs


일단 저의 마크업은 이렇습니다.

이 마크업을 보시면 13번 라인에 콘솔창으로 E 를 찍어보게 됩니다.

크롬에서 E 에 담긴걸 찍어보도록 하겠습니다.

여기서 function()의 괄호 안에 있는 e 는 mousewheel 입니다!



WheelEvent {}

이라는 게 뜨죠? 정확히 13번 라인입니다.

이걸 펼쳐보면... wheelDelta 라는 속성이 있습니다.



저 값이

마우스 휠을 '내리게' 되면 -120 을 출력하고

마우스 휠을 '올리게' 되면 120 을 출력합니다.


익스도 마찬가지로 크롬과 동일하게

e.originalEvent 의 속성으로 wheelDelta 속성을 사용합니다.



그렇죠?


하지만!


파이어폭스는

e.originalEvent <- 여기서의 e 는 DOMMouseScroll 이벤트 겠죠!




파이어폭스 에서도 똑같이 위와같은 마크업의 13번째 라인이 콘솔창에 출력 되었습니다.

저 DOMMouseScroll 을 클릭해 보면



detail 이라는 속성이 들어있습니다.

저 detail 속성은 파이어폭스에서만 사용할수 있는

e.originalEvent 의 속성 입니다.


하지만...

크롬도 익스도 120을 출력하는데

얘만 3 출력하게 놔둔다면

조건문을 이용한 UI를 만들때 불편하겠죠???


그래서 -40을 곱하기 해주는 겁니다.

파이어 폭스는 마우스를 휠을 올릴경우 음수값을

마우스 휠을 내릴경우 양수값을 출력합니다.



/* -- 180802 추가 -- */

노트북 에선 마우스 내릴 때 -150 올릴때 150 으로 표시되는 경우가 있습니다.

그래서 마우스 휠 이벤트 2장의 내용을 수정했습니다.

http://recoveryman.tistory.com/121

댓글 25

  • 모찌 (2016.05.19 14:59)

    늘 이 기능이 궁금했는데 알기 쉽게 설명해주셔서 감사합니다.^^

  • 지나가는비둘기 (2016.07.29 11:02)

    좋은 정보 잘 보고 갑니다~

    • 회복맨 (2016.07.29 13:13 신고)

      구구 구구구구구구구구ㅜ구국꾸구ㅜ구구 ㅋㅋㅋㅋ

  • 반응 (2016.08.05 10:54)

    쉽게 설명해주셔서 감사합니다ㅅㅅ

  • bully (2016.09.09 11:52)

    항상 궁금했어요 ㅠㅠ 정말 감사해요

  • 다락방코더 (2016.11.17 14:26)

    알려주신 코디 이용하여 윈페이지 만들어봤습니다~~
    너무나도 감사합니다~~
    작동잘되지만
    파이어폭스에서 마우스휠 동작이 안되는 경우가 발생합니다.
    제어판 --> 마우스 속성 --> 휠 --> 세로스크롤 한번에 스크롤할 줄의수를 높이면
    파이어 폭스에서 동작이 안되고 있습니다~
    혹시 작동되는 방법이 있나요~?

    • 회복맨 (2016.11.17 14:34 신고)

      안녕하세요. 방문해 주셔서 감사합니다.

      파이어 폭스에서 마우스 휠 동작이 안되는 경우....가 발생 하나요?

      그런 경우를 대비해서 조건식을 작성했던거로 기억합니다.

      이 블로그의 글에서 콘솔창으로 마우스 휠을 올릴경우와 내릴경우를 판단하는 부분이 있습니다.

      파이어 폭스 브라우저를 열어서 콘솔창을 한번 확인해 주신 뒤에 값이 제대로 찍혀서 출력 되는지 궁금합니다.

  • 다락방코더 (2016.11.17 15:40)

    파이어 폭스 브라우저를 열어서 콘솔창으로 확인하였습니다.
    detail 값 3 / -3 잘 출력되고있습니다.
    제어판 --> 마우스 속성 --> 휠 --> 세로스크롤 한번에 스크롤할 줄의수의 높이를 (3) 으로 하고
    스크롤하면 스크롤이 작동하고 높이를 3을제외하고 다른 높이로 세팅을하면 작동을 하지 않고있습니다.
    ㅜ.ㅜ. 어렵네요~~

    • 회복맨 (2016.11.17 15:51 신고)

      그...런 부분을 해결 하려고 본문에 꽤 자세히 적었습니다...;;

      -3, 3 안나오게 하려고 곱셈을 하는 부분이 있습니다.

      크롬과 익스에선 -120, 120을 출력합니다. 이게 파이어 폭스에서도 동일하게 출력하게 하기 위해서 곱셈을 하게 되는 부분이 있습니다.

      정말 안되는게 맞다면
      http://recoveryman.tistory.com/121
      이 부분의 소스 코드를 그대로 복사해서 파이어폭스에서 테스트 해보시기 바랍니다.

    • 회복맨 (2016.11.17 16:16 신고)

      다락방코더 님의 소스 코드를 제 메일로 보내주시면 주석 처리해서 어떤 부분을 보완해야 하는지 회신해 드릴께요..

      mahan89@daum.net

      메일 보내시고 난 뒤 댓글 남겨 주세요.

  • 다락방코더 (2016.11.17 16:25)

    메일보내드렸습니다.
    감사합니다~~~

    • 회복맨 (2016.11.17 16:34 신고)

      방금 테스트 해봤는데
      파이어폭스에서 잘 되는거 같습니다.
      일반 파이어폭스, 개발자 파이어폭스버전 둘 다 별 이상없이 '휠' 부분은 정상 작동 하고 있습니다.

      어떤 동작을 원하시는지도 알겠습니다만........... 짜놓으신 코드를 리뷰해 보니... 이건 파이어폭스에서만 나올 문제가 아니라 모든 브라우저 공통으로 문제가 생길 요지가 다분합니다.

      이 부분은 저도 직접 해보고 이 글에 첨부 올릴께요.

  • 다락방코더 (2016.11.17 17:29)

    네 감사합니다~

  • 걱정안하는자 (2017.10.23 10:39)

    정말정말 꿀정보 감사합니다!!

  • (2017.11.10 11:06)

    비밀댓글입니다

    • 회복맨 (2017.11.10 12:03 신고)

      https://goo.gl/UmUwL9

      이렇게 하면 스크롤 맨 끝을 알 수 있습니다만 원하시는게 맞는지 잘 모르겠네요

      방문해 주셔서 감사합니다 :)

  • DEV (2019.02.15 14:10)

    보다가 든 생각인데.. 단순히 위/아래만 알기 위함이면 그냥 음수인지 양수이지만 체크해도 되지 않을까요?

    • 회복맨 (2019.02.15 14:17 신고)

      그 음수인지 양수인지가...
      굉장히 중요한 부분입니다 ㅠ

      마우스를 내릴때
      IE, 크롬 등은 음수의 detail 키값을 가지는 반면, 파이어폭스의 경우엔 '양수의' 값을 지니게 됩니다.

      반대로
      마우스를 올릴경우.
      IE, 크롬은 양수의 키값을 가지고, 파이어폭스는 '음수'의 키값을 지니게 되요.

      이 말인 즉 같은 코드를 썻을때 다른 브라우저에선 같은 결과물이 나오질 않습니다.
      이 부분에 대해선 상세히 본문에 작성해 놨습니다.

      그래서 저런식의 계산법을 적용 시켜 주거나, 또는 브라우저가 어떤 브라우저인지 체크를 하는 스크립트를 작성 해야만 합니다.

      방문해 주셔서 감사합니다! :)

    • DEV (2019.02.15 14:40)

      네 파폭과 타 브라우저가 음/양수 값이 다른 것은 알겠는데

      추가된 내용 보면 노트북은 값이 다르고, 제어판에서 휠 값을 변경할 경우 또 달라지니 굳이 120이라는 숫자에 맞춰서 계산을 할 게 아니라

      파폭일 때만 곱하기 -1을 해줘서 음/양수만 맞춰주면 120이든 3이든 150이든 상관 없이 음수면 아래, 양수면 위 이런식으로 체크하면 더 심플해지지 않을까 해서 말씀 드린 겁니다.

    • 회복맨 (2019.02.15 15:03 신고)

      아 맞습니다!
      이 글을 처음 작성했을때가 15년도라 오래전에 작성한 글이라서 헷갈리고 있었네요.

      파폭일때만 곱하기 -1 해줘도 됩니다. *40은 의미가 없고 저 역시 음수냐 양수가가 제일 중요한 부분인거로 알았었습니다

      그래서 그 음수냐 양수냐로 바꾼 코드가 2장에서 나옵니다.
      https://recoveryman.tistory.com/121

      이전엔 음,양수 120 기점으로 했던거로 같은데
      여기선 18년도 8월 시점으로 0으로 바꿨습니다.

      답변 감사합니다!

      물론 저 코드보다 더 간결하고 알기 쉬운 코드도 분명있습니다.

      이 글이 그 15년도 당시에 제가 wheel 이벤트의 detail 키값의 존재를 처음 인지하였을 때 작성했습니다.

    • DEV (2019.02.15 15:09)

      넵 저도 궁금해서 찾던 중에 많은 도움이 되었네요ㅎ