如何使用jQuery检测是否接近屏幕底部？

Question

我正在阅读哈佛商业评论（HBR）的博客文章，高级领导者的特质（2011-02-22）。在纽约时报（NYT）上也有这样的操作。如何检测读者何时滚动到底部？

在HBR上，当您滚动到接近底部时，他们会提供另一篇可供阅读的文章。

- chrisjlee

---

您可以测量页面的高度（并确保它适用于所有浏览器），测量滚动位置（并确保它适用于所有浏览器），以及测量视口的高度(...)，以了解用户正在查看的内容。请查看一些“视图中的元素”插件，例如http://remysharp.com/2009/01/26/element-in-view-event-plugin/，因为这正是它所做的。 - Yuji 'Tomita' Tomita

怎么样在页面底部添加一个元素，然后使用该元素的onMouseOver等事件呢？ - Rosdi Kasim

对不起！我的错误！现在没问题了！:) - DrStrangeLove

Answer 1

虽然其他答案可以告诉您何时到达底部，但为了回答您关于如何判断何时接近底部的问题，我以前使用过这个：

if  ( ($(document).height() - $(window).height()) - $(window).scrollTop() < 1000 ){
    //do stuff
}

你可以将值“1000”更改为任何你想要的值，以便在距离底部该距离时触发你的脚本。

- Jeff

Answer 2

$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height()-$(window).height()){
        alert("We're at the bottom of the page!!");
    }
});

- DrStrangeLove

---

请查看http://ejohn.org/blog/learning-from-twitter/。在捕获窗口滚动事件时要小心。 - Manish

“将处理程序附加到窗口滚动事件是一个非常糟糕的想法。根据浏览器，滚动事件可能会频繁触发，并且在滚动回调中放置代码将减慢任何尝试滚动页面的速度（这不是一个好主意）。”，参见《从 Twitter 学习》。 - jensgram

@Manish 哎呀！好吧，至少我们意见一致 :) - jensgram

为什么要复制三次选择器？而且，为什么使用jQuery来获取只需普通的vanilla JS就可以轻松识别的信息呢？ 使用window.scrollY和window.innerHeight代替它们的jQuery对应项将解决这两个问题。 - tvanc

所以，我发现 window.scrollY 不是完全安全的（在 IE8 或更低版本中不起作用），但 document.documentElement.scrollTop 是可以的。 https://dev59.com/l2Qn5IYBdhLWcg3wt5Eg - tvanc

需要注意的一点是，请确保您有指定doctype和正确的HTML标记。我曾经快速编写代码，但无法弄清为什么它不起作用，原来是这个问题。在这里留下它，以防有人遇到同样的问题。 - Bren1818

Answer 3

$(window).scroll(function () {
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
      alert('end of page');
   }
});

-10表示用户需要到达页面末尾多远才能执行函数。这使您可以根据需要调整行为。

在http://jsfiddle.net/wQfMx/上检查工作示例。

- Hussein

---

>= 和 -10 对我很有帮助，那些愚蠢的错误，谢谢。 - dippas