Question

您好我使用以下代码行在用户位于底部之前触发额外项100px的追加：

var height = window.innerHeight;
if ($(window).scrollTop() + height + 100 >= $(document).height())

问题是很多次发送了多个追加命令。如果用户在底部之前达到100px，则执行该命令。当用户继续上下滚动时，该命令会一次又一次地执行。

我试过这个：

$(window).scroll(function () {
    if ($(window).scrollTop() + height == $(document).height()) {
        // anything
    }
}

Answer 1

I have a similar infinite scroll script running in my site. Try doing this:
<script type="text/javascript">
$(document).ready(function(){
    // Trigger Funtion when browser scroll triggered
    $(window).scroll(function(){
        if  ($(window).scrollTop() >= $(document).height() - $(window).height() - 10){
//do action here
        }
    }); 
});
</script>

Answer 2

在大多数浏览器中，滚动事件会频繁触发。我猜它会在第一个请求返回之前多次触发。您可能希望添加一个标记以防止请求（如果已经有一个请求）。

var requesting = false;

function renderPage() { /* ... */ }

function makeRequest() {
  if (!requesting) {
    // Go ahead and fetch the next page.
    requesting = true;
    $.ajax(...).then(renderPage).always(function() {
      requesting = false;
    });
  }
}

$(window).on('scroll', function() {
  if (/* scrolled to 100px above the bottom */) {
    makeRequest();
  }
});

无限滚动在底部之前发射

2 个答案: