你如何用 jQuery 检测你何时接近屏幕底部？ [复制]

Posted 2023-03-10

【中文标题】你如何用 jQuery 检测你何时接近屏幕底部？ [复制]

【英文标题】：How do you detect when you're near the bottom of the screen with jQuery? [duplicate]

【发布时间】：2011-07-02 11:10:53

【问题描述】：

我正在阅读 Harvard Business Review (HBR) 博客文章，The Traits of Advanced Leaders (2011-02-22)。他们也在The New York Times (NYT) 上这样做。您如何检测您的阅读器何时一直滚动到底部？

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

【问题讨论】：

您可以测量页面的高度（并确保它适用于所有浏览器），测量滚动位置（并确保它适用于所有浏览器），以及测量视口的高度（.. .) 以了解用户正在查看的位置。看看像remysharp.com/2009/01/26/element-in-view-event-plugin 这样的“元素视图”插件，因为这正是它的作用。

在页面底部附近添加一个元素，然后使用该元素的onMouseOver等怎么样？

对不起！我的错误！现在好了！:)

【参考方案1】：

虽然其他答案会显示您何时处于底部，但要回答您关于如何判断何时接近底部的问题，我以前使用过这个：

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

您可以将值“1000”更改为您想要的任何值，以便在距离底部那么多像素时触发您的脚本。

【参考方案2】：

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

【讨论】：

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

"将处理程序附加到窗口滚动事件是一个非常非常糟糕的主意。 根据浏览器的不同，滚动事件可能会触发很多并将代码放入滚动中回调将减慢任何滚动页面的尝试（不是一个好主意）”，cf。 Learning from Twitter

@Manish Argh！好吧，至少我们同意:)

为什么要重复三次选择器？为什么要使用 jQuery 来获取与普通 ol'vanilla JS 一样容易辨别的信息？使用 window.scrollY 和 window.innerHeight 而不是 jQuery 对应项可以解决这两个问题。

所以，我看到 window.scrollY 并不完全安全（在 IE8 或更低版本中不起作用），但 document.documentElement.scrollTop 是。 ***.com/questions/16618785/…

【参考方案3】：

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

-10 表示在函数执行之前用户必须离页面末尾多远。这使您可以根据需要灵活地调整行为。

在http://jsfiddle.net/wQfMx/查看工作示例

【讨论】：

>= 和 -10 帮了我大忙，那些愚蠢的错误，谢谢