Question

目前，当用户到达网站底部时，我使用以下逻辑从数据库中自动加载新帖子：

$(window).scroll(function() {
 if ($(window).scrollTop() == $(document).height() - $(window).height()) {
  last_msg_funtion();
 }
});

足够公平。它做了它应该做的事情，但是我想改变它，所以当用户是例如它开始加载新帖子时距离网站底部100个像素。有任何想法吗？当我尝试更改代码时，我要么：

**进入了几乎无限循环的last_msg_function（）调用，因为if（）语句匹配例如距离底部100像素，滚动时每个像素下降到0像素。所以，如果你滚动得很慢，你可能会设法从底部完全停止100像素，但这在现实生活中是行不通的。

**）它必须与我定义的底部的像素完全匹配，例如90像素。如果你停止滚动，例如89或91像素，它不会加载任何东西。

那么，我应该更改什么来确保它在你0时开始加载 - >距离网站底部100个像素，但同时每次都不发送新请求，在任何方向上将滚动位置更改为几个像素，同时还在加载？

谢谢！

Answer 1

好的答案尼克。另一件事是确保每次用户滚动时滚动功能仅触发一次，否则，如您所述，last_msg_function将被多次调用。尝试这样的事情......

var processScroll = true;
$(window).scroll(function() {
    if (processScroll  && $(window).scrollTop() > $(document).height() - $(window).height() - 100) {
        processScroll = false;
        last_msg_funtion();
        processScroll = true;
    }
});

Answer 2

您可以稍微更改一下，例如：

$(window).scroll(function() {
 if ($(window).scrollTop() > ($(document).height() - $(window).height() - 100)) {
  last_msg_funtion();
 }
});

You can give it a try here。这是检查滚动位置是否与实际底部相距0-100px ...您可能希望确保last_msg_function()如果已经加载则不执行任何操作（您应该这样做）无论如何），除此之外，if()是唯一需要的改变。

更改滚动逻辑上的自动加载（防止用户等待）

2 个答案: