Stop double-scrolling propagation

For http://stackoverflow.com/q/16323770/1454806

by sstur

HTML

<div class="scrollable">
    <ul>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of items to make the div scroll</li>
        <li>A bunch of...

CSS

.scrollable {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
}

JavaScript

$('.scrollable').on('DOMMouseScroll mousewheel', function(e) {
  var $this = $(this);
  var scrollTop = this.scrollTop;
  var scrollHeight = this.scrollHeight;
  var height = $this.height();
  var up = e.originalEvent.wheelDelta > 0;

  console.log(scrollTop, scrollHeight, height, e);
  if ((scrollTop === (scrollHeight - height) && !up) || (scrollTop === 0 && up)) {
    e.preventDefault();
  }
});