防止非固定元素在到達固定元素末尾時滾動

Question

我知道這個問題曾經被問過，但是我找不到答案。

基本上，我有一個固定的側邊欄，其中包含菜單和頁面的其余部分。

滾動固定的側邊欄並到達末尾時，頁面的其余部分開始滾動到。 我知道這是“正常行為”，但我需要防止這種情況的發生。

我還嘗試將頁面的其余部分（容器） fixed並在其上使用overflow:auto ，這可以完成工作，但是會干擾我的asp.net應用程序中的MaintainScrollPositionOnPostBack = true屬性。

任何指導將不勝感激。

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