Question

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

背景：我想要的是实际更新网站内容。有人告诉我有关像infinite-scroll这样的插件在整个Google以及Stackoverflow，但我不想使用任何插件。我发现的是一个纯jQuery代码来检测用户在文档上的当前位置。这就是这样的：

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

我找到了什么：

我在这里找到了这段代码：Check if a user has scrolled to the 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
       }
     });
  }
});

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

如何了解该用户位于当前文档的末尾

1 个答案: