在触发实际滚动进一步事件之前，允许更多滚动(松弛)

Question

我有一个盒子，上面有一个溢出滚动。当你到达盒子的尽头时;我想触发一个事件（滚动到页面的下一部分）。

下面的代码有效，但是，我希望在其中有一些"松弛"。因此，当您到达盒子的末尾时，它不需要直接触发，而只需要在您坚持向下滚动时触发。

对改进以下代码以达到此效果有任何帮助吗？

function whiteboxscroll (){
  $('.white-box-inner').on("DOMContentLoaded scroll",function(){
    var myDiv = $('.white-box-inner');
    myDiv.each(function(){
      el = this;
      if(isElementInViewport(el) === true) { // current white box is in view
        if (this.offsetHeight + this.scrollTop >= this.scrollHeight ) { //current box is at end of scroll
          //define the current section 'this' belongs to
          var current_section = $(this).parents().eq(1);
          // define the next section
          var next_section = $(current_section).next('.cd-section');
          // smoothscroll to this next section
          if(next_section.attr('id') !== undefined){ // only perform scroll if next section is defined
            smoothScroll($('#' + next_section.attr('id')));
          }
        }
        else if(this.scrollTop === 0){ // current box is at top of scroll
          //define the current section 'this' belongs to
          var current_section = $(this).parents().eq(1);
          // define the prev section
          var prev_section = $(current_section).prev('.cd-section');
          // smoothscroll to this next section
          if(prev_section.attr('id') !== undefined) { // only perform scroll if prev section is defined
            smoothScroll($('#' + prev_section.attr('id')));
          }
        }
      }
    });
  });
}

我试图添加一个 50 像素的缓冲区，即，但事件永远不会触发，因为我们永远不会达到那个点。

Answer 1

您可以在

滚动结束时将变量设置为 true，并在鼠标滚轮上检查该变量是否为 true。

var enable_scroll = false;
$(".container").scroll(function(e){
    $('p.info').html(this.scrollTop);
    if(this.offsetHeight + this.scrollTop >= this.scrollHeight ) {
        $('p.info').html("End of scroll. Flag enabled.");
        enable_scroll = true;
    }
    
})
.on('mousewheel DOMMouseScroll',function(e){ //DOMMouseScroll for FF
   if(enable_scroll){
      $('p.info').html("<strong>Event fired</strong>");
   }
});

.container { height: 250px; overflow:auto;}
.inner {height: 1000px;}
p.info{ padding: 10px; color: #fff; background: orange;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <p class="info">Start scrolling</p>
<div class="container">
    <div class="inner">Scroll down</div>
</div>
<p class="bottom"></p>