Stop double-scrolling propagation
For http://stackoverflow.com/q/16323770/1454806
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) {
console.log('ev', ev);
console.log('this', this);
console.log('$this', $(this));
var $this = $(this),
scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = $this.innerHeight(),
delta = ev.originalEvent.wheelDelta,
up = delta > 0;
var prevent = function() {
ev.stopPropagation();
ev.preventDefault();
ev.returnValue = false;
return false;
}
if (!up && -delta > scrollHeight - height - scrollTop) {
// Scrolling down, but this will take us past the bottom.
$this.scrollTop(scrollHeight);
return prevent();
} else if (up && delta > scrollTop) {
// Scrolling up, but this will take us past the top.
$this.scrollTop(0);
return prevent();
}
});