英文 | https://javascript.plainenglish.io/how-to-write-an-infinite-scroll-list-with-react-6565c775aef6

翻译 | 杨小爱

当您不知道页面大小时，无限滚动是合适的。您的项目在流中（例如，时间线）。唯一的机会是按顺序显示项目。然后实现无限滚动可用性的最佳方式。我写了一个简单的模拟，当用户访问滚动的最后一个东西时加载新项目。示例小程序链接：https://onurdayibasi.dev/infinite-scroll/v1

首先，我们需要一个具有固定高度和溢出 y 滚动能力的列表容器。

第二部分是信息卡项目和一个加载元素。加载元素仅在获取操作活动时可见。

滚动机制

当组件挂载到应用程序时，我们将滚动侦听器添加到“infinite-scroll-container”并在元素卸载时将其删除。

这里最重要的部分是“轨道滚动”我们将在轨道滚动中做什么？

• 检查您是否访问了滚动区域的底部。

• 如果访问，则从后端获取新的数据块

• 并生成新项目并将它们渲染到列表容器中

检查滚动访问最后一个元素

我们在 document.getElementById 的帮助下获取 DOM 元素。之后，我们计算滚动访问底部。如果滚动到底部并获取 false，那么我们开始获取操作。

if (el.offsetHeight + el.scrollTop >= el.scrollHeight)

然后，我写了一个简单的伪获取函数，它在等待 0.6 秒后生成新项目

总结

本文分享的这个列表希望对你有所帮助，最后，感谢你的阅读。

如果您觉得这个对您有所帮助，也请您分享给您身边做开发的朋友，谢谢。

学习更多技能

请点击下方公众号