jqueryscrolljpaneljpanelmenu

jPanel scrolls body when reached the end


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?


Solution

  • 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();
    }
    });