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

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>