【问题标题】:Javascript/JQuery perform function when user scrolls near bottom of page [duplicate]当用户在页面底部附近滚动时,Javascript / JQuery执行功能[重复]
【发布时间】:2011-08-02 07:53:28
【问题描述】:

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

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

【问题讨论】:

    标签: javascript jquery


    【解决方案1】:
    $(window).scroll(function () {
       if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
          alert('end of page');
       }
    });
    

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

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

    【讨论】:

    【解决方案2】:

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

    【讨论】:

    • 使用 Waypoints 比使用 Hussein 的答案更好,因为 Waypoints 是跨设备兼容的,而 Hussein 的答案仅适用于 PC。
    • 侯赛因的回答中没有任何内容会限制它在 PC 上工作。此外,将库用于可以在一行代码中完成的事情会非常低效。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-11-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多