Разрешить больше прокрутки (провисание) до начала фактического прокрутки следующего события

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, когда вы достигнете конца прокрутки, и проверьте, истинна ли эта переменная на колесиках мыши.

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>