javascript - 检查用户是否滚动到底部(不仅仅是窗口,而是任何元素)

标签 javascript jquery scroll pagination

我正在制作一个分页系统(有点像 Facebook),当用户滚动到底部时会加载内容。我想最好的方法是找到用户何时位于页面底部并运行 Ajax 查询以加载更多帖子。

唯一的问题是我不知道如何检查用户是否滚动到页面底部。有什么想法吗?

我正在使用 jQuery,因此请随时提供使用它的答案。

最佳答案

使用 .scroll() window 上的事件,如下所示:

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

You can test it here ,这需要窗口的顶部滚动,所以它向下滚动了多少,添加可见窗口的高度并检查它是否等于整体内容的高度(document)。如果您想检查用户是否接近底部,它看起来像这样:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

You can test that version here ,只需将该 100 调整为您想要触发的底部的任何像素。

关于javascript - 检查用户是否滚动到底部(不仅仅是窗口,而是任何元素),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3898130/

相关文章:

javascript - Array.prototype.slice.call 在 getElementsByClassName 的重新创建中如何工作?

javascript - 按术语名称获取 GUID - jsom

angular - 使用 Angular 2 路由器解析时,防止在路由器导航到另一个页面之前滚动到顶部

swift - 以编程方式 ScrollView

javascript - 无法滚动到第一个错误消息字段

javascript - Meteor 后端管理界面 : are there any packages that make this easy, 是 Django 吗?

javascript - 如何使用 jquery 移动侧边菜单和顶部栏

javascript - 如何在 Vue 向导表单中使用字段验证?

javascript - Knockout js 计算未被触发

javascript - 包含具有两个不同调用的脚本的原因是什么?