JavaScript Academy · 课时

无限滚动

Q: 「无限滚动」这节课中我会学到什么？

随着用户滚动加载更多内容。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

随着用户滚动加载更多内容。

无限滚动 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

什么是无限滚动

无限滚动会在用户接近列表底部时自动加载更多内容，而不需要用户点击“下一页”。社交信息流和搜索结果通常会使用这种方式。

sentinel 模式

最简洁的技术是使用 sentinel：在列表末尾放置一个空元素。当 sentinel 滚动进入视口时，获取并追加下一批数据。

// Markup pattern:
// <ul id="feed"> ...items... </ul>
// <div id="sentinel"></div>  <!-- trigger element -->

观察 sentinel

让 Intersection Observer 观察 sentinel。由于它位于最后一个条目之后，因此它可见就意味着用户已经到达列表末尾。

const sentinel = document.getElementById('sentinel');
const observer = new IntersectionObserver(onIntersect, {
  rootMargin: '200px' // load a bit early
});
observer.observe(sentinel);

触发加载

在回调中检查 isIntersecting。当它为 true 时，加载下一页数据。

function onIntersect(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreItems();
    }
  });
}

跟踪页码

保留一个页码计数器，使每次加载都获取下一段数据。成功获取数据后将计数器递增。

let page = 1;

async function loadMoreItems() {
  const items = await fetchPage(page);
  appendItems(items);
  page++;
}

防止重复加载

回调可能会反复触发。使用 loading 标志，确保已有获取操作进行时不会启动新的获取操作。

let loading = false;

async function loadMoreItems() {
  if (loading) return;
  loading = true;
  const items = await fetchPage(page);
  appendItems(items);
  page++;
  loading = false;
}

追加新条目

将获取到的条目添加到 sentinel 之前，使它始终位于不断增长的列表底部，并准备触发下一次加载。

function appendItems(items) {
  const feed = document.getElementById('feed');
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.title;
    feed.appendChild(li);
  });
}

在末尾停止

当服务器不再返回数据时，断开 observer，使其停止尝试加载。这样可以避免无休止地发送空请求。

const items = await fetchPage(page);
if (items.length === 0) {
  observer.disconnect(); // no more data
  return;
}

rootMargin 的作用

较大的 rootMargin（例如 200px）会在用户真正到达底部之前开始加载，因此新条目可以无缝出现，不会出现明显停顿。

new IntersectionObserver(onIntersect, {
  rootMargin: '300px' // begin loading well before the end
});

无障碍注意事项

无限滚动可能会困住键盘用户和屏幕阅读器用户，也可能隐藏页脚。请考虑提供一个手动的“加载更多”按钮作为备用方案，并使用 ARIA 实时区域以礼貌的方式播报新内容。

完整流程

使用 Intersection Observer 实现无限滚动：放置 sentinel，观察它；当它出现时加载并追加数据；防止重复加载；数据耗尽时断开 observer。整个过程不需要计算滚动位置。

快速检查

测试您对无限滚动的理解。

回顾

您实现了无限滚动：

在列表后放置 sentinel 元素。
使用 Intersection Observer 观察它。
发生相交时，获取并追加下一页数据。
使用 loading 标志避免重复获取。
数据耗尽时断开 observer。

接下来是滚动触发的动画。

常见问题解答

「无限滚动」课时是免费的吗？

是的 — 「无限滚动」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「无限滚动」这节课中我会学到什么？

随着用户滚动加载更多内容。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「无限滚动」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy