I'm using the jQuery jPanelMenu plugin for a website. Since the navigation is relatively long, I get a scrollbar on the panel. However, once I reach the end of said panel, I start scrolling the body as well. Is there a way to prevent this?
As you have to prevent scrolling of parent element, you have to use event stopPropagation().
Check the JSFiddle :- JSFiddle
$(document).on('DOMMouseScroll mousewheel','#jPanelMenu-menu', function(ev) {
var $this = $(this),
scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = $this.height(),
delta = (ev.type == 'DOMMouseScroll' ?
ev.originalEvent.detail * -40 :
ev.originalEvent.wheelDelta),
up = delta > 0;
var prevent = function() {
ev.stopPropagation();
ev.preventDefault();
ev.returnValue = false;
return false;
}
if (!up && -delta > scrollHeight - height - scrollTop) {
$this.scrollTop(scrollHeight);
return prevent();
} else if (up && delta > scrollTop) {
$this.scrollTop(0);
return prevent();
}
});