JavaScript 中的无限滚动

打开一个购物网站，滚动到页面底部，会发现更多商品正在被检索和显示。当我们继续向下滚动时，更多的商品被加载和检索，这个过程一直持续到没有更多商品可供显示为止。这些购物网站通常使用 后端 API 列出有限数量的商品。这通常被称为 “无限滚动”。

无限滚动：它是什么？

它也被称为 无尽滚动或无限滚动，无限滚动是一种 Web 设计和开发方法，通过用户向下滚动时自动加载新内容并将其附加到页面末尾，从而消除了分页的需求。由于用户无需手动翻页，他们可以滚动浏览无限数量的内容，并仍然拥有无缝的浏览体验。

社交网络、在线商店和其他需要显示大量内容的网站经常使用 React 无限滚动组件。

为了避免严重的性能问题，React 无限滚动仅在需要时加载数据，并根据无尽滚动事件显示数据。每次用户想要加载下一页的数据时，分页都需要他们点击页码。React 无限滚动方法通常更实用。

当我们想要连续加载同一层级的数据时，应该使用 无限滚动 方法。否则，我们还有其他选项。分页可以被无限滚动功能温和地取代。但它并非适用于所有网站。总的来说，如果用户希望完成某些以目标为导向的任务，例如他们需要快速轻松地获取特定信息而无需费力，那么无尽滚动就不适合你。

与无限滚动方法类似，React Infinite Scroll 是一种 Web 开发技术，它会在用户向下滚动时自动加载新内容并将其附加到页面。然而，它在这里尤其擅长，因为它利用了 React JavaScript 包。

React Infinite Scroll 的工作原理是使用 Intersection Observer API 检测元素（通常是“加载更多”按钮或特定的 div）何时进入视图。每当该元素进入视图时，就会激活一个加载更多数据并将其附加到页面底部的方法。由于每次用户滚动并加载更多元素时都会重复此过程，因此用户会获得无限滚动的体验。

像社交网络平台、在线市场和其他需要显示大量内容的网站等大型应用程序经常使用 React Infinite Scroll 组件。通过仅在需要时调出相关信息，它可以使程序员提高整体性能，并为客户提供无缝的程序浏览体验。

它也可以作为一种易于集成的第三方包来实现，该包与 React 应用程序配合使用。通常，这些包包含一个 API，允许程序员修改 React 无限滚动的行为方式，包括每次滚动加载多少项，如何处理加载错误等。

如何在 React.js 中添加无限滚动？

无论是在线、移动还是桌面应用程序，任何应用程序中都有大量的数据记录。出于与产品、对象、旅行、火车、房屋等相关的多种原因，用户希望在一个地方访问这些数据。

由于普遍的性能问题导致无法一次性加载所有记录来启用此功能，因此我们需要一种替代方案。一种替代方案是无尽滚动。无限滚动是一种基于滚动事件的数据加载的常用技术，它会在用户滚动到页面底部时立即连续加载数据。要使用 React 添加无限滚动，有两种方法。

1. 使用外部库
2. 应用独特的无限滚动机制

我们将在这里构建一个简单的、自定义的无尽滚动解决方案，以响应滚动事件来加载数据。

代码

输出