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

Существует плагин, который определяет перемещение колесика мыши вверх / вниз и скорость в регионе.

Привязка как к 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 г.

Я решил вернуться к этому вопросу, так как это было давно. Страница 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.
  // this condition makes sure it's vertical scrolling that happened
  if(event.originalEvent.deltaY !== 0){

    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

Вот и ванильный раствор. Может использоваться в 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;
});

Плагин, опубликованный @DarinDimitrov, jquery-mousewheel, не работает с jQuery 3+. Было бы более целесообразно использовать jquery-wheel, который работает с jQuery 3+.

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

моя комбинация выглядит так. он исчезает и исчезает при каждой прокрутке вниз / вверх. в противном случае вам придется прокручивать до заголовка, чтобы его можно было скрыть.

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;

});

Если вы используете упомянутый плагин jquery mousewheel, то как насчет использования второго аргумента функции обработчика событий - delta:

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

Я думаю, что многие ключевые вещи разбросаны повсюду, и мне нужно было прочитать все ответы, чтобы мой код работал так, как я хотел, поэтому я опубликую свои выводы только в одном месте:

• Вы должны использовать событие "wheel" вместо других устаревших или специфичных для браузера событий.
• Многие люди здесь ошибаются: противоположность x>0 - x<=0, а противоположность x<0 - x>=0, многие из приведенных здесь ответов будут запускать прокрутку вниз или вверх неправильно, когда x=0 (горизонтальная прокрутка).
• Кто-то спрашивал, как добавить к нему чувствительность, для этого вы можете использовать setTimeout() с задержкой примерно 50 мс, которая меняет какой-то вспомогательный флаг isWaiting=false, и вы защищаете себя с помощью if(isWaiting), а затем ничего не делаете. Когда он срабатывает, вы вручную изменяете isWaiting=true, а чуть ниже этой строки вы снова запускаете setTimeout, который позже изменит isWaiting=false через 50 мс.

Недавно у меня возникла такая же проблема, когда $(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';
        }
    }
}