修復一個元素，直到裏面的所有內容滾動

Question

我之前問過這個問題，但我無法很好地表達，但這是我想實現的。滾動單頁網站時，所有部分的高度均爲100％。當我看到一個內容向下滾動的部分時，我想禁用滾動整個網頁直到該部分的內容完全滾動。例如，在此琴：

div { 
 
    height: 100vh; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
} 
 

 
.red { 
 
    background: red; 
 
} 
 

 
.white { 
 
    background: white; 
 
} 
 

 
.black { 
 
    background: black; 
 
} 
 

 
div.content-wrapper { 
 
    overflow: auto; 
 
    width: 40%; 
 
}

<div class="red"> 
 

 
</div> 
 
<div class="blue"> 
 

 
</div> 
 
<div class=white> 
 
    <div class="content-wrapper"> 
 
    <div class="content"> 
 
     Test TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest 
 
     TestTest TestTest TestTest TestTest TestTest Test 
 
    </div> 
 
    <div class="content"> 
 
     Test TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest 
 
     TestTest TestTest TestTest TestTest TestTest Test 
 
    </div> 
 
    <div class="content"> 
 
     Test TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest 
 
     TestTest TestTest TestTest TestTest TestTest Test 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="black"> 
 

 
</div>

當我們到了白色款，它應該是固定的，我們應該聽滾動事件，只是不知怎麼翻譯或內部的滾動元件（測試試驗的div）當我們結束時 - 允許滾動到黑色部分。

任何人都有類似的問題？我不知道該怎麼做，因此我無法提供我嘗試過的代碼。我在AngularJS工作。

Answer 1

你已經找到了解決辦法？如果沒有，試試這個。

$('.white').on('mousewheel DOMMouseScroll', function(e) { 
 
    var e0 = e.originalEvent, 
 
    delta = e0.wheelDelta || -e0.detail; 
 

 
    var scrolled = $(".content-wrapper").scrollTop() + (delta < 0 ? 1 : -1) * 20; 
 
    if (!($(".content-wrapper").scrollTop() == 0 && scrolled < 0) && //check if hit top and still scrolling above 
 
     !($(".content-wrapper")[0].scrollHeight - $(".content-wrapper").scrollTop() <= $(".content-wrapper").outerHeight() && 
 
     scrolled + $(".content-wrapper").outerHeight() > $(".content-wrapper")[0].scrollHeight) //check if scrollbar hit the .white scroll bottom and still scrolling below 
 
    ) { 
 
    $(".content-wrapper").scrollTop(scrolled); 
 
    e.preventDefault(); 
 
    } 
 
});

Answer 2

你可以試試：

$('.scrollable').on('mousewheel DOMMouseScroll', function (e) { 
    var e0 = e.originalEvent, 
     delta = e0.wheelDelta || -e0.detail; 

    this.scrollTop += (delta < 0 ? 1 : -1) * 40; 
    e.preventDefault(); 
}); 

演示：https://jsbin.com/howojuq/edit?js,output

或參考：How to prevent page scrolling when scrolling a DIV element?