修复一个元素，直到里面的所有内容滚动

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?