防止非固定元素在到达固定元素末尾时滚动

Question

我知道之前已经问过这个问题，但我无法找到答案。

基本上，我有一个固定的侧边栏，其中包含一个菜单和页面的其余部分。

滚动固定边栏并到达结尾时，页面的其余部分开始滚动到。我知道这是＆＃34;正常行为＆＃34;但我需要防止这种情况发生。

我还尝试将页面的其余部分（容器）定位为fixed并在其上使用overflow:auto并执行该作业，但它干扰了我的asp中的MaintainScrollPositionOnPostBack = true属性.net应用程序。

任何指导都将不胜感激。

Answer 1

一个简单的解决方法是，只要将鼠标悬停在菜单上，就可以禁用容器上的滚动，并在将鼠标悬停在其他位置时将其恢复：

$('.menu').hover(function() {
    $('.container').css('overflow', 'hidden'); 
}, function() {
    $('.container').css('overflow', 'auto');
});

或者，如果菜单位于HTML中的容器之前，您甚至可以尝试：

.menu:hover + .container {
    overflow: hidden;
}

如下所述，这是在没有闪烁滚动条的情况下修复问题的原因：

jQuery：

$('.menu').hover(function() { 
    $('body').addClass("noscroll"); 
}, function() { 
    $('body').removeClass("noscroll"); 
});

CSS：

body.noscroll { 
    position: fixed; 
    overflow-y: scroll; 
    width: 100%; 
}