[JQUERY] jQuery를 마우스 휠 이벤트를 받기?

jQuery를 마우스 휠 이벤트를 받기?

해결법

1. ---

   1.지역에 걸쳐 마우스 휠과 속도 UP / DOWN 감지하는 플러그인이있다.

   지역에 걸쳐 마우스 휠과 속도 UP / DOWN 감지하는 플러그인이있다.

2. ---

   2.

   ​$(document).ready(function(){
       $('#foo').bind('mousewheel', function(e){
           if(e.originalEvent.wheelDelta /120 > 0) {
               console.log('scrolling up !');
           }
           else{
               console.log('scrolling down !');
           }
       });
   });
   

3. ---

   3.모두 마우스 휠에 바인딩 및 DOMMouseScroll 나를 위해 정말 잘 작동 결국 :

   모두 마우스 휠에 바인딩 및 DOMMouseScroll 나를 위해 정말 잘 작동 결국 :

   $(window).bind('mousewheel DOMMouseScroll', function(event){
       if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
           // scroll up
       }
       else {
           // scroll down
       }
   });
   

   이 방법은 IE9 +, 크롬 33, 파이어 폭스 (27)에서 일하고있다.

   편집 - 2016년 3월

   나는 그것이 오랜만이기 때문에이 문제를 다시 방문하기로 결정했다. 스크롤 이벤트에 대한 MDN 페이지 내 이전의 검출 방법에 매우 바람직하다 차종이 requestAnimationFrame의 사용을 스크롤 위치를 검색하는 좋은 방법이있다. 나는 스크롤 방향과 위치뿐만 아니라 더 나은 호환성을 제공하기 위해 자신의 코드를 수정 :

   (함수() { VAR supportOffset = window.pageYOffset은! ==, 정의되지 않은 lastKnownPos = 0, 똑딱 = 거짓, scrollDir, currYPos; 함수 해봐요 (scrollPos, scrollDir) { // 코드는 여기 간다 ... 을 console.log ( '스크롤 POS :'+ scrollPos + '| 스크롤 디렉토리 :'+ scrollDir); } window.addEventListener ( '휠', 기능 (E) { currYPos = supportOffset? window.pageYOffset : document.body.scrollTop; scrollDir = lastKnownPos> currYPos? '위아래'; lastKnownPos = currYPos; 만약 (! 똑딱) { window.requestAnimationFrame (함수 () { 해봐요 (lastKnownPos, scrollDir); 틱 = 거짓; }); } = 사실 똑딱; }); }) ();

4. ---

   4.2017 년 지금, 당신은 쓸 수 있습니다

   2017 년 지금, 당신은 쓸 수 있습니다

   $(window).on('wheel', function(event){
   
     // deltaY obviously records vertical scroll, deltaX and deltaZ exist too
     if(event.originalEvent.deltaY < 0){
       // wheeled up
     }
     else {
       // wheeled down
     }
   });
   

   현재 파이어 폭스 (51), 크롬 (56), IE9 +와 함께 작동

5. ---

   5."마우스 휠"이벤트에 대해 이야기 답변이되지 않는 경우를 참조한다. 표준 이벤트는 단순히 "바퀴"입니다. https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel 참조

   "마우스 휠"이벤트에 대해 이야기 답변이되지 않는 경우를 참조한다. 표준 이벤트는 단순히 "바퀴"입니다. https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel 참조

6. ---

   6.이것은 나를 위해 일한 :)

   이것은 나를 위해 일한 :)

    //Firefox
    $('#elem').bind('DOMMouseScroll', function(e){
        if(e.originalEvent.detail > 0) {
            //scroll down
            console.log('Down');
        }else {
            //scroll up
            console.log('Up');
        }
   
        //prevent page fom scrolling
        return false;
    });
   
    //IE, Opera, Safari
    $('#elem').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta < 0) {
            //scroll down
            console.log('Down');
        }else {
            //scroll up
            console.log('Up');
        }
   
        //prevent page fom scrolling
        return false;
    });
   

   유래에서

7. ---

   7.여기 바닐라 용액이다. 이벤트가 함수에 전달하면 jQuery를에 사용할 수 있습니다 것은 jQuery를이 jQuery를 이벤트의 속성으로 사용 가능하게 event.originalEvent입니다. 또는 콜백 함수 내부의 경우, 우리는 첫 번째 라인 전에 추가 아래 : 이벤트 = event.originalEvent ;.

   여기 바닐라 용액이다. 이벤트가 함수에 전달하면 jQuery를에 사용할 수 있습니다 것은 jQuery를이 jQuery를 이벤트의 속성으로 사용 가능하게 event.originalEvent입니다. 또는 콜백 함수 내부의 경우, 우리는 첫 번째 라인 전에 추가 아래 : 이벤트 = event.originalEvent ;.

   이 코드는 휠 속도 / 양을 정상화하고 뒤로 마우스 휠의 움직임에 앞으로 일반 마우스의 스크롤 및 음수가 될 것입니다 무엇에 대한 긍정적이다.

   var wheel = document.getElementById('wheel');
   
   function report(ammout) {
       wheel.innerHTML = 'wheel ammout: ' + ammout;
   }
   
   function callback(event) {
       var normalized;
       if (event.wheelDelta) {
           normalized = (event.wheelDelta % 120 - 0) == -0 ? event.wheelDelta / 120 : event.wheelDelta / 12;
       } else {
           var rawAmmount = event.deltaY ? event.deltaY : event.detail;
           normalized = -(rawAmmount % 3 ? rawAmmount * 10 : rawAmmount / 3);
       }
       report(normalized);
   }
   
   var event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
   window.addEventListener(event, callback);
   

   코드와 몇 가지 여분의 설탕에서 더 자세한입니다 jQuery를위한 플러그인도있다 : https://github.com/brandonaaron/jquery-mousewheel

8. ---

   8.이것은 각 IE, 파이어 폭스와 크롬의 최신 버전에서 일하고있다.

   이것은 각 IE, 파이어 폭스와 크롬의 최신 버전에서 일하고있다.

   $(document).ready(function(){
           $('#whole').bind('DOMMouseScroll mousewheel', function(e){
               if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
                   alert("up");
               }
               else{
                   alert("down");
               }
           });
       });
   

9. ---

   9.나는이 코드는 나를 위해 잘 작동되는 오늘이 문제에 갇혀 발견되었다

   나는이 코드는 나를 위해 잘 작동되는 오늘이 문제에 갇혀 발견되었다

   $('#content').on('mousewheel', function(event) {
       //console.log(event.deltaX, event.deltaY, event.deltaFactor);
       if(event.deltaY > 0) {
         console.log('scroll up');
       } else {
         console.log('scroll down');
       }
   });
   

10. ---

    10.이 코드를 사용

    이 코드를 사용

     knob.bind('mousewheel', function(e){  
     if(e.originalEvent.wheelDelta < 0) {
        moveKnob('down');
      } else {
        moveKnob('up');
     }
      return false;
    });
    

11. ---

    11.내 조합은 다음과 같습니다. 이 페이드 아웃 각 스크롤 업 / 다운에 페이드. 그렇지 않으면 당신의 헤더를 페이딩, 헤더에 스크롤해야합니다.

    내 조합은 다음과 같습니다. 이 페이드 아웃 각 스크롤 업 / 다운에 페이드. 그렇지 않으면 당신의 헤더를 페이딩, 헤더에 스크롤해야합니다.

    var header = $("#header");
    $('#content-container').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta > 0) {
            if (header.data('faded')) {
                header.data('faded', 0).stop(true).fadeTo(800, 1);
            }
        }
        else{
            if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);
        }
    });
    

    위의 하나는 터치에 최적화되지 않은 / 모바일, 나는이 하나가 더 나은 모든 모바일을 수행 생각 :

    var iScrollPos = 0;
    var header = $("#header");
    $('#content-container').scroll(function () {
    
        var iCurScrollPos = $(this).scrollTop();
        if (iCurScrollPos > iScrollPos) {
            if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);
    
        } else {
            //Scrolling Up
            if (header.data('faded')) {
                header.data('faded', 0).stop(true).fadeTo(800, 1);
            }
        }
        iScrollPos = iCurScrollPos;
    
    });
    

12. ---

    12.@DarinDimitrov이, JQuery와 - 마우스 휠을 게시하는 플러그인은 jQuery를 3+로 나뉩니다. jQuery를 3+와 함께 작동 JQuery와 휠을 사용하는 것이 더 바람직 할 것이다.

    @DarinDimitrov이, JQuery와 - 마우스 휠을 게시하는 플러그인은 jQuery를 3+로 나뉩니다. jQuery를 3+와 함께 작동 JQuery와 휠을 사용하는 것이 더 바람직 할 것이다.

    당신이 jQuery를 경로를 가고 싶어하지 않는 경우, MDN이 높은이 많은 장소에서 비표준 지원되지 않는의로 마우스 휠 이벤트를 사용주의. 대신 당신이 이상 정확히 값이 평균 얻고있는 것을 훨씬 더 특이성을 얻을 당신이 휠 이벤트를 사용한다는 것을 말한다. 그것은 대부분의 주요 브라우저에서 지원합니다.

13. ---

    13.언급 사용하는 경우 JQuery와 마우스 휠 플러그인 후 어떤 이벤트 핸들러 함수의 두 번째 인수를 사용하는 방법에 대한 - 델타 :

    언급 사용하는 경우 JQuery와 마우스 휠 플러그인 후 어떤 이벤트 핸들러 함수의 두 번째 인수를 사용하는 방법에 대한 - 델타 :

    $('#my-element').on('mousewheel', function(event, delta) {
        if(delta > 0) {
        console.log('scroll up');
        } 
        else {
        console.log('scroll down');
        }
    });
    

14. ---

    14.나는 최근에 어디에서 같은 문제를 가지고 $ (창) .mousewheel는 undefined를 반환합니다되었다

    나는 최근에 어디에서 같은 문제를 가지고 $ (창) .mousewheel는 undefined를 반환합니다되었다

    내가 한 일은 $ (창) CSTE 연구진 ( '마우스 휠', 기능 () {})이었다;

    또한 내가 사용하고이를 처리하기 :

    function (event) {
        var direction = null,
            key;
    
        if (event.type === 'mousewheel') {
            if (yourFunctionForGetMouseWheelDirection(event) > 0) {
                direction = 'up';
            } else {
                direction = 'down';
            }
        }
    }
    

from https://stackoverflow.com/questions/8189840/get-mouse-wheel-events-in-jquery by cc-by-sa and MIT license