jQuery에서 마우스 휠 이벤트를 받으시겠습니까?

scrolljQuery에서 마우스 휠 이벤트 ( 이벤트 에 대해 이야기하지 않음)를 얻는 방법이 있습니까?

마우스 휠의 위 / 아래 및 속도를 감지 하는 플러그인 이 있습니다.

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

둘 다에 바인딩 mousewheel하고 DOMMouseScroll결국 나를 위해 잘 작동했습니다.

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

이 방법은 IE9 +, Chrome 33 및 Firefox 27에서 작동합니다.

편집-2016 년 3 월

이 문제는 오랜 시간이 지났으므로 다시 방문하기로 결정했습니다. 스크롤 이벤트에 대한 MDN 페이지에는를 사용하는 스크롤 위치를 검색하는 좋은 방법이 있습니다 requestAnimationFrame. 스크롤 방향 및 위치 외에도 더 나은 호환성을 제공하기 위해 코드를 수정했습니다.

(function() {
  var supportOffset = window.pageYOffset !== undefined,
    lastKnownPos = 0,
    ticking = false,
    scrollDir,
    currYPos;

  function doSomething(scrollPos, scrollDir) {
    // Your code goes here...
    console.log('scroll pos: ' + scrollPos + ' | scroll dir: ' + scrollDir);
  }

  window.addEventListener('wheel', function(e) {
    currYPos = supportOffset ? window.pageYOffset : document.body.scrollTop;
    scrollDir = lastKnownPos > currYPos ? 'up' : 'down';
    lastKnownPos = currYPos;

    if (!ticking) {
      window.requestAnimationFrame(function() {
        doSomething(lastKnownPos, scrollDir);
        ticking = false;
      });
    }
    ticking = true;
  });
})();

이 코드는 현재 작동하고 있습니다 Chrome v50, Firefox v44, Safari v9, and IE9+

참고 문헌 :

• https://developer.mozilla.org/en-US/docs/Web/Events/scroll
• https://developer.mozilla.org/en-US/docs/Web/Events/wheel

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
  }
});

현재 Firefox 51, Chrome 56, IE9 +에서 작동

"마우스 휠"이벤트에 대한 답변은 더 이상 사용되지 않는 이벤트를 나타냅니다. 표준 이벤트는 단순히 "바퀴"입니다. 참조 https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel를

이것은 나를 위해 일했다 :)

 //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;
 });

stackoverflow에서

다음은 바닐라 솔루션입니다. 함수에 전달 된 이벤트가 event.originalEventjQuery가 jQuery 이벤트의 속성으로 사용할 수있는 경우 jQuery에서 사용할 수 있습니다. 또는 callback아래 함수 내부에 첫 번째 줄 앞에 추가하십시오.event = event.originalEvent; .

이 코드는 휠 속도 / 양을 정규화하고 일반적인 마우스에서 앞으로 스크롤하는 것에 긍정적이고 뒤로 마우스 휠 이동에서는 부정적입니다.

데모 : http://jsfiddle.net/BXhzD/

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

이것은 각 IE, Firefox 및 Chrome의 최신 버전에서 작동합니다.

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

오늘이 문제에 갇혀 있었고이 코드가 제대로 작동한다는 것을 알았습니다.

$('#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');
    }
});

이 코드를 사용하십시오

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

내 조합은 다음과 같습니다. 스크롤을 내릴 때마다 페이드 아웃됩니다. 그렇지 않으면 헤더를 페이드 인하 기 위해 헤더까지 스크롤해야합니다.

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;

});

@DarinDimitrov 게시하는 플러그인은 jquery-mousewheel, jQuery를 3+로 분류됩니다 . jquery-wheeljQuery 3 이상에서 작동하는 것이 더 좋습니다 .

jQuery 경로를 사용하지 않으려는 경우 MDNmousewheel 은 비표준적이고 여러 곳에서 지원되지 않으므로 이벤트 를 사용하는 것이 좋습니다. 대신 정확히 의미하는 값에 대해 훨씬 더 구체적으로할수록 이벤트 를 사용해야wheel 한다고 말합니다 . 대부분의 주요 브라우저에서 지원됩니다.

언급 된 jquery mousewheel plugin 을 사용하는 경우 이벤트 핸들러 함수의 두 번째 인수를 사용하는 방법은 다음과 delta같습니다.

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

최근 $(window).mousewheel에 돌아 오는 곳 에서 같은 문제가 발생했습니다. undefined

내가 한 것은 $(window).on('mousewheel', function() {});

또한 그것을 처리하기 위해 사용하고 있습니다 :

function (event) {
    var direction = null,
        key;

    if (event.type === 'mousewheel') {
        if (yourFunctionForGetMouseWheelDirection(event) > 0) {
            direction = 'up';
        } else {
            direction = 'down';
        }
    }
}