title: Get direction for mousewheel JQuery event handler
body: <p>I try to figure out which direction the user have "mousewheeled" using a binding on a <code>mousewheel</code> event for my element. </p>
  
  <p>You can see in the following snippet, when mousewheeling your mouse over the grey rectangle, the event is triggered. </p>
  
  <p><a href="https://jsfiddle.net/qexb1207/" rel="nofollow"><strong>JSFiddle</strong></a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="rect"&gt;&lt;/div&gt;
  &lt;div&gt;
      Mousewheel event state : 
      &lt;label class="event-state-mousewheel"&gt;Triggered !&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.rect {
      width : 200px;
      height : 200px;
      background-color : lightgrey;
  }
  
  .event-state-mousewheel {
      color : red;
      display : none;
  }
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(function() {
      $('.rect').on('mousewheel', function(event) {
          $(".event-state-mousewheel").stop(true, false).fadeIn(250).fadeOut(250);
      });
  });
  </code></pre>
  
  <p><strong>PROBLEM</strong> </p>
  
  <p>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. </p>
  
  <p><strong>QUESTION</strong></p>
  
  <p>Is there a formula using these element (from the object returned) to get the mousewheel direction ?
  Or is there an event like <code>$("#element").on("mousewheeltop")</code> ?</p>
  
  <p><strong>NOTE</strong></p>
  
  <p>I want at possible not use any other external plugin, only JQuery.</p>