Отримати події з колесом миші в jQuery?

Чи є спосіб отримати події колеса миші (не кажучи про scrollподії) в 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.

Редагувати - березень 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
  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;
});

моє поєднання виглядає приблизно так. вона вицвітає і згасає при кожному прокручуванні вниз / вгору. інакше вам доведеться прокручувати до заголовка, щоб зменшити заголовок у.

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подію, оскільки ви отримуєте набагато більше конкретики щодо того, що саме означають значення, які ви отримуєте. Його підтримують більшість основних браузерів.

Якщо ви використовуєте згаданий плагін jwery mousewheel , то що робити з використанням 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';
        }
    }
}