title: Custom horizontal scrollbar logic
body: <p>I made a custom div scroller based on TweenMax easings and jQuery mousewheel events. The scroll works like a charm but I need to move the scrollbar handler to show the scroll progress. I made some tests based on calcs of parent width, scrollLeft and total div width, but didn't found the right solution…<br>
  <a href="http://jsfiddle.net/tccsq6e9/3/" rel="nofollow">I tried</a> to adapt <a href="http://istockphp.com/demo/how-to-create-jquery-scrollbar-div/" rel="nofollow">this example</a> for my horizontal scrollbar, but it's still a strange behaviour.<br>
  Any idea?</p>
  
  <pre><code>$(window).on("mousewheel DOMMouseScroll", function (e) {
      e.preventDefault();
      var delta = e.originalEvent.wheelDelta / 120 /* Chrome */ || -e.originalEvent.detail; /* FF */
      var dur = 1.2;
      TweenLite.to($("#photos"), dur, {
          scrollLeft: $("#photos").scrollLeft() - parseInt(delta * 35),
          ease: Expo.easeOut,
          overwrite: 5
      });
  });
  </code></pre>
  
  <hr>
  
  <p>Live example:<br>
  <a href="http://jsfiddle.net/tccsq6e9/2/" rel="nofollow">http://jsfiddle.net/tccsq6e9/2/</a></p>