使用jQuery，当到达可滚动div的底部时，如何防止页面滚动? [英] 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.

推荐答案

我认为这可以解决问题，参见小提琴上的示例

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

小提琴

这篇关于使用jQuery，当到达可滚动div的底部时，如何防止页面滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！