英文 | 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 秒后生成新项目
总结
本文分享的这个列表希望对你有所帮助，最后，感谢你的阅读。
如果您觉得这个对您有所帮助，也请您分享给您身边做开发的朋友，谢谢。
学习更多技能请点击下方公众号
