Получить события колеса мыши в jQuery?

​$(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.

---

Edit-Mar 2016

я решил вернуться к этому вопросу, так как это было некоторое время. Страница 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;
  });
})();

Смотрите ручку отслеживание прокрутки Vanilla JS Джесси дупу (@blindside85) на CodePen.

этот код в настоящее время работает в 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

ответы, говорящие о событии" mousewheel", ссылаются на устаревшее событие. Стандартное событие-это просто "колесо". См.https://developer.mozilla.org/en-US/docs/Web/Reference/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+

это сработало для меня:)

 //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

вот ванильное решение. Может использоваться в jQuery, если событие передается в функцию event.originalEvent который 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-wheel, который работает с jQuery 3+.

если вы не хотите идти по маршруту jQuery,MDN очень предостерегает с помощью mousewheel событие как это нестандарт и не поддерживается во многих местах. Вместо этого он говорит, что вы должны использовать wheel событие как вы получите гораздо больше конкретики по поводу того, что именно значения ты становишься злым. Он поддерживается большинством основных браузеров.

при использовании указанных колесико мыши в jQuery плагин, тогда как насчет использования 2-го аргумента функции обработчика событий -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';
        }
    }
}