修复一个元素，直到里面的所有东西都被滚动

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>

当我们到达白色部分时，它应该被修复，我们应该监听滚动事件并以某种方式翻译或滚动里面的元素（测试测试 divs），当我们走到最后 - 允许滚动到黑色部分。

有人遇到过类似的问题吗？我不知道该怎么做，因此我无法提供我尝试过的代码。我在 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?