Получить направление для mousewheel JQuery обработчик события

Question

Я пытаюсь выяснить, в каком направлении пользователь «вымотал мышью», используя привязку для события mousewheel для моего элемента.

Вы можете увидеть в следующем фрагменте, когда мышь мыши над серым прямоугольником, событие запускается.

JSFiddle

HTML

<div class="rect"></div> 
<div> 
    Mousewheel event state : 
    <label class="event-state-mousewheel">Triggered !</label> 
</div> 

CSS

.rect { 
    width : 200px; 
    height : 200px; 
    background-color : lightgrey; 
} 

.event-state-mousewheel { 
    color : red; 
    display : none; 
} 

JavaScript

$(function() { 
    $('.rect').on('mousewheel', function(event) { 
     $(".event-state-mousewheel").stop(true, false).fadeIn(250).fadeOut(250); 
    }); 
}); 

ПРОБЛЕМА

Я не могу найти способ, чтобы получить направление. Я попытался отладить объект, возвращенный при запуске события, но он слишком велик для отладки, поскольку количество элементов в нем является монстративным.

ВОПРОС

Есть ли формула использования этих элементов (от объекта, возвращаемого), чтобы получить направление колеса мыши? Или есть такое событие, как $("#element").on("mousewheeltop")?

ПРИМЕЧАНИЕ

Я хочу, чтобы в возможно не использовать любой другой внешний модуль, только JQuery.

Answer 1

от свойств wheelDelta и детализации, что вам нужно, как показано ниже:

if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { 
    // Scroll up 
} 
else { 
    // Scroll down 
} 

Я обновил ваш jsfiddle с этим кодом.

Кроме того, обратите внимание, что MouseWheel событие deprecated и вы должны использовать колесо вместо этого.

Answer 2

​$(document).ready(function(){ 
    $('#foo').bind('mousewheel', function(e){ 
     if(e.originalEvent.wheelDelta > 0) { 
      $(this).text('scrolling up !'); 
     } 
     else{ 
      $(this).text('scrolling down !'); 
     } 
    }); 
}); 

Смотреть это: Get mouse wheel events in jQuery?