Stop double-scrolling propagation

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

by Troy Alford

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>
    </ul>
</div>
<ul>
    <li>A bunch of text to make the body scroll</li>
    <li>A bunch of text to make the body scroll</li>
    <li>A bunch of text to make the body scroll</li>
    <li>A bunch of text to make the body scroll</li>
    <li>A bunch of text to make the body scroll</li>
    <li>A bunch of text to make the body scroll</li>
    <li>A bunch of text to make the body scroll</li>
    <li>A bunch of text to make the body scroll</li>
    <li>A bunch of text to make the body scroll</li>
    <li>A bunch of text to make the body scroll</li>
    <li>A bunch of text to make the body scroll</li>
    <li>A bunch of text to make the body scroll</li>
    <li>A bunch of text to make the body scroll</li>
    <li>A bunch of text to make the body scroll</li>
    <li>A bunch of text to make the body scroll</li>
    <li>A bunch of text to make the body scroll</li>
</ul>

CSS

body.NoScrolling {
    overflow: hidden;
}
.Scrollable {
    max-height: 200px;
    overflow-y: scroll;
    border: 1px solid #ccc;
}

JavaScript

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

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