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），当我们走到最后 - 允许滚动到黑色部分。 / p>

有人有过类似的问题吗？我不知道该怎么做，因此我无法提供我试过的代码。我在AngularJS工作。

Answer 1

您可以尝试：

$( '.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?

Answer 2

您找到了解决方案吗？如果没有，试试这个。

$('.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();
  }
});

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

2 个答案: