Question

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

然而，在代码工作之下，我想要一些＆＃34;松弛＆＃34;在里面。所以它不需要在你到达盒子末端时直接开火，但只有当你坚持向下滚动时才会直接开火。

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

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。

＆＃13;

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>");
   }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: