With jQuery, how can I prevent the page from scroll when reaching the bottom of a scrollable div?

问题

I have a slide out mobile menu that has overflow set to auto so it will allow the user to scroll if the menu is too long.

I want to the user to be able to reach the end of the menu without the page scrolling on them.

I've tried each of these:

$(window).scroll(function(e){
     e.preventDefault();
});

$(window).scroll(function(e){
     e.preventDefault();
     e.stopPropagation();
});

$(window).scroll(function(e){
     return false
});

$('body').scroll(function(e){
     e.preventDefault();
});

$('body').scroll(function(e){
     e.preventDefault();
     e.stopPropagation();
});

$('body').scroll(function(e){
     return false
});

of course it test that the menu is open first. None of these prevent the page from scrolling.

回答1:

I think this will do the trick see the example on the fiddle

$(".scroll").bind( 'mousewheel DOMMouseScroll', function ( e ) {
                    //Get the original Event
                    var e0 = e.originalEvent,
                    //Hold the movement of the scroll 
                    delta = e0.wheelDelta ;
                    //If it's negative add -30 for each step or 30 if is positive
                    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
                    //Apply the scroll only for the element with the 
                    //handler      
                    e.preventDefault();
                    //Prevent the normal event
                }); 

Fiddle

来源：https://stackoverflow.com/questions/22694503/with-jquery-how-can-i-prevent-the-page-from-scroll-when-reaching-the-bottom-of