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

130

Есть ли способ получить события колеса мыши (не говоря уже о scrollсобытиях) в jQuery?

thejh
источник
1
Быстрый поиск выявил этот плагин, который может помочь.
Jerad Rose
Это решение работает для меня: stackoverflow.com/questions/7154967/jquery-detect-scrolldown
bertie 06
@thejh опубликовал новый ответ по этому поводу с событиями DOM3: stackoverflow.com/a/24707712/2256325
Серджио
Просто примечание об этом. Если вы просто хотите обнаружить изменения во входных данных, а они не обнаруживают изменения с помощью колесика мыши, попробуйте$(el).on('input', ...
rybo111,

Ответы:

46

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

Дарин Димитров
источник
35
плагин? давай .. проверьте ответ ниже, вы можете обойтись без него
202
$(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 > 0) {
            console.log('scrolling up !');
        }
        else{
            console.log('scrolling down !');
        }
    });
});
Махди Шахбази
источник
51
DOMMouseScrollСобытие используется в FF, так что вы должны слушать на обоих .bind('DOMMouseScroll mousewheel') {evetns developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/...
mrzmyr
9
e.originalEvent.wheelDeltaне определено в FF23
hofnarwillie
26
Вам не нужно делить на 120, это бесполезная трата процессора
Venimus
6
наверное, лучший ответ
2
Но в любом случае, зачем вам делить его на 120? Что это за константа? (Вы не обязаны, как указал Венимус.)
mshthn
145

Привязка к обоим 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;
  });
})();

См. Статью «Pen Vanilla JS Scroll Tracking » Джесси Дюпюи ( @ blindside85 ) на CodePen .

Этот код в настоящее время работает в Chrome v50, Firefox v44, Safari v9, and IE9+

Ссылки:

Джесси Дюпюи
источник
Это сработало для меня лучше всего. Однако этот сценарий запускается при каждом щелчке колеса прокрутки. Для некоторых скриптов это может быть непосильно. Есть ли способ рассматривать каждое событие прокрутки как один экземпляр вместо того, чтобы запускать скрипт для каждого щелчка колеса прокрутки?
invot
Не особо. Из того, что я видел, многие люди либо избегают иметь дело с отслеживанием прокрутки, либо вместо этого будут использовать таймер (например, проверять положение пользователя на странице каждые x миллисекунд и т. Д.). Если есть более производительное решение, я определенно хочу об этом знать!
Джесси Дюпюи,
1
Я нашел способ сделать это: stackoverflow.com/questions/23919035/…
invot
1
Спасибо за обновление. Можете ли вы скопировать свой код в свой ответ? Никогда не знаешь, выйдет ли когда-нибудь кодовый ключ из строя. Это случилось раньше.
JDB все еще помнит Монику
2
@JesseDupuy, я бы поддержал этот ответ, но ваша обновленная версия не работает, если документ соответствует представлению ("ширина: 100vh; высота: 100vh") или получил "overflow: hidden;". «window.addEventListener ('scroll', callback)» не является правильным ответом на «window.addEventListener ('mousewheel', callback)».
Даниэль
45

На данный момент в 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 +

Луи Амелин
источник
37

Ответы, говорящие о событии "колесико мыши", относятся к устаревшему событию. Стандартное мероприятие - это просто «колесо». См. Https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel

Брайан Ди Пальма
источник
20
Я попробовал их и обнаружил: «wheel» работает в Firefox и IE, но не в Chrome. «Колесико мыши» работает в Chrome и IE, но не в Firefox. «DOMMouseScroll» работает только в Firefox.
Curtis Yallop
1
Ого, это сэкономило мне много времени. Спасибо!
gustavohenke
3
Похоже, в августе 2013 года Chrome добавил поддержку «wheel»: code.google.com/p/chromium/issues/detail?id=227454
rstackhouse,
2
Safari по-прежнему не поддерживает событие колеса.
Thayne
Как говорится в вашей документации, wheelсобытие поддерживается Edge не на том, IEчто не одно и то же. CanIuse
Alex
16

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

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

Анджит КП
источник
14

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

Sergio
источник
8

Это работает во всех последних версиях 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");
            }
        });
    });
futuredayv
источник
5

Сегодня я застрял в этой проблеме и обнаружил, что этот код у меня работает нормально

$('#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');
    }
});
Прафул Шарма
источник
4

используйте этот код

 knob.bind('mousewheel', function(e){  
 if(e.originalEvent.wheelDelta < 0) {
    moveKnob('down');
  } else {
    moveKnob('up');
 }
  return false;
});
Бал мукунд кумар
источник
0

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

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;

});
Томас Хартманн
источник
0

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

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

Коберн
источник
0

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

$('#my-element').on('mousewheel', function(event, delta) {
    if(delta > 0) {
    console.log('scroll up');
    } 
    else {
    console.log('scroll down');
    }
});
Mojo
источник
-3

У меня недавно возникла такая же проблема, когда $(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';
        }
    }
}
Шимон Тода
источник
Вы не сказали, что есть newUtilities.getMouseWheelDirection
ccsakuweb
Это выходит за рамки этого вопроса. Так что это не сайт для копирования и вставки.
Szymon Toda