jQuery无限滚动

实现当用户滚动到页面底部时自动加载更多内容，提升浏览体验。 · 难度：入门 · +15XP

jQuery无限滚动

无限滚动（Infinite Scroll）是一种流行的加载技术，当用户滚动到页面底部时自动加载新内容，广泛用于社交媒体和新闻网站。

原理

通过监听scroll事件，计算窗口高度、文档高度和滚动条位置。当满足滚动条位置 + 窗口高度 ≥ 文档高度 - 阈值时，触发加载。

关键方法

• $(window).scroll() - 绑定滚动事件
• $(document).height() - 文档总高度
• $(window).height() - 可视窗口高度
• $(window).scrollTop() - 已滚动距离

示例代码

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
    // 加载新内容
    $('#content').append('
新加载的项目
');
  }
});

注意事项

练习提示

在右侧代码中，修改阈值（当前为100）为50，观察加载时机变化。