2

原谅我：你好。我希望我不会在我的问题标题中混淆你们。

背景：我想要的实际上是更新网站的内容。有人告诉我一些插件，比如infinite-scroll整个 Google 和 Stackoverflow，但我不想为此使用任何插件。我当时发现的是一个纯 jQuery 代码，用于检测用户在文档上的当前位置。事情是这样的：

$(window).scroll(function() {
 if($(window).scrollTop() + $(window).height() == $(document).height()) {
  alert("bottom!");
 }
});

我发现了什么：

我在这里找到了这段代码：检查用户是否滚动到底部

这意味着我已经阅读了有关 stackoverflow 的所有问题。

问题是什么：问题是上面的代码不公平。它只有在我使用时才有效：== $(document).height()因为它只会在用户位于文档末尾时运行代码。一旦我尝试使用类似的东西：$(document).height() - 100或其他类似的东西。它不起作用。我必须转到文档的末尾，当我回来时它会显示警报！这对用户来说不太可能。

我也尝试过，unbind('scroll')但是一旦通过警报就会停止代码执行！我的意思是它只会提醒用户一次，因此间接地它会为用户加载一次数据，然后会停止再次加载更多数据。

所以我认为在这里问这个问题会是一个更好的主意。我可以得到一个简单的 jQuery 代码，它会知道用户在屏幕上的存在！并且批量数据一次，因为当我使用> $(document).height()它时，它会一直向我显示弹出窗口，但它应该停止显示弹出窗口并在发出请求后再次开始显示弹出窗口！

或者简单地说：

或者换句话说，我想要的是当用户向下移动到底部的 80% 时应该发出请求，所以当他到达页面的几乎 95% 部分时，数据被放置在那里并且他可以查看它，然后当他达到第 80% 部分时再次发出请求。等等！这部分很容易理解。

使用这个作品：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
      alert("Sending ajax request!");
      $.ajax({
         url: "ajax_requests/send_email_digest",
         success: function (data) {
           // show the data..if any
         }
      });
   }
});

但这不会：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == 
    $(document).height() - 100) {
      alert("Sending ajax request!");
      $.ajax({
       url: "ajax_requests/send_email_digest",
       success: function (data) {
        // show the data..if any
       }
     });
  }
});
4

1 回答 1

1

我认为滚动功能不会为您滚动的每个像素调用。您必须很幸运才能在此 if 语句中找到匹配项

if($(window).scrollTop() + $(window).height() == $(document).height() - 100)

我认为您必须解决检测用户是否位于页面底部 20% 的问题，并且您可以使用全局变量来检查 ajax 请求是否正在运行。

var requesting = false;
$(window).scroll(function() {
   if(!requesting && 
      (($(window).scrollTop() + $(window).height()) >= ($(document).height() * 0.8))) {
      requesting = true;
      alert("Sending ajax request!");
      $.ajax({
       url: "ajax_requests/send_email_digest",
       success: function (data) {
        // show the data..if any
       }
     }).done(function(){
        requesting = false;
    });
  }
});
于 2013-09-23T11:41:28.970 回答