Используйте jQuery для проверки события mousewheel без полосы прокрутки

Question

Используйте jQuery для проверки события mousewheel без полосы прокрутки

Как проверить движение колесика мыши без полосы прокрутки?

$(document).mousewheel(function() {

     clicker.html("a7a");

});

593 4

jQuery scroll scrollbar mousewheel

4 ответов:

Comments

Ничего не найдено.

Aaron · Accepted Answer · 2015-06-27 15:55:24

Я настоятельно рекомендую вам использовать этот плагин jQuery: PLUGIN

Без плагина попробуйте следующий пример: пример

HTML:
<div id='foo' style='height:300px; width:300px; background-color:red'></div>
Javascript:
$('#foo').bind('mousewheel', function(e) {
    if(e.originalEvent.wheelDelta / 120 > 0) {
        alert('up');
    } else {
        alert('down');
    }
});
На div нет полосы прокрутки, но событие wheel обнаружено.

Behnam Mohammadi · Accepted Answer · 2015-02-28 10:57:11

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

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

Alvaro · Accepted Answer · 2013-09-25 19:34:12

И, если вы не хотите использовать какой-либо плагин вообще (IE8, Chrome, Firefox, Safari, Opera...), просто сделайте это:

if (document.addEventListener) {
    document.addEventListener("mousewheel", MouseWheelHandler(), false);
    document.addEventListener("DOMMouseScroll", MouseWheelHandler(), false);
} else {
    sq.attachEvent("onmousewheel", MouseWheelHandler());
}


function MouseWheelHandler() {
    return function (e) {
        // cross-browser wheel delta
        var e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

        //scrolling down?
        if (delta < 0) {
            alert("Down");
        }

        //scrolling up?
        else {
             alert("Up");
        }
        return false;
    }
}

Живой пример: http://jsfiddle.net/CvCc6/1/

nHaskins · Accepted Answer · 2017-06-16 21:38:46

Это просто обновление ответа @Aaron, используя новое событие "колесо", описанное здесь: https://developer.mozilla.org/en-US/docs/Web/Events/wheel
$('#foo').on('wheel', function(e){
    if(e.originalEvent.deltaY < 0) {
        console.log('scrolling up !');
    } else{
        console.log('scrolling down !');
    }
});
Вы также можете использовать deltaX для просмотра горизонтальной прокрутки или deltaZ, Если у вас есть какая-то сумасшедшая 3D-вещь.