I try to figure out which direction the user have "mousewheeled" using a binding on a mousewheel
event for my element.
You can see in the following snippet, when mousewheeling your mouse over the grey rectangle, the event is triggered.
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);
});
});
PROBLEM
I cannot find a way to get the direction. I tryied to debug the object returned when the event is triggered, but it is way too big to debug since the amount of element in it is monstruous.
QUESTION
Is there a formula using these element (from the object returned) to get the mousewheel direction ?
Or is there an event like $("#element").on("mousewheeltop")
?
NOTE
I want at possible not use any other external plugin, only JQuery.