当用户在页面底部附近滚动时，Javascript / JQuery执行功能[重复]

Posted 2023-03-10

【中文标题】当用户在页面底部附近滚动时，Javascript / JQuery执行功能[重复]

【英文标题】：Javascript/JQuery perform function when user scrolls near bottom of page [duplicate]

【发布时间】：2011-08-02 07:53:28

【问题描述】：

在一个著名的新闻网站上（抱歉，不记得具体是哪一个）我看到了一个非常酷的效果...当您在页面底部附近滚动时，一个新元素会从浏览器视口的顶部向下滑动有很多社交媒体选项（推文、在 Facebook 上分享等）。我想模拟一些类似的东西......事实上，如果我知道当用户接近页面底部时如何触发一个功能，我真的可以想到很多事情......

所以，我的问题是非常基本的：当用户在动态大小的页面底部附近滚动时如何触发功能？

【参考方案1】：

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

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

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

【讨论】：

***.com/questions/3898130/…

美丽。太棒了。正是我需要的。

【参考方案2】：

如果您有一个靠近页面底部的元素，您可以使用Waypoints 在用户滚动到该元素时触发一个功能。或者，如果您想像 Hussein 的帖子那样使用像素限制，请务必留意 scroll lessons we learned from twitter

【讨论】：

使用 Waypoints 比使用 Hussein 的答案更好，因为 Waypoints 是跨设备兼容的，而 Hussein 的答案仅适用于 PC。

侯赛因的回答中没有任何内容会限制它在 PC 上工作。此外，将库用于可以在一行代码中完成的事情会非常低效。