在我们开始编码之前，如果您想了解更多关于什么是分页以及我们为什么需要它的信息，请在这里查看我的博客。
假设要求在屏幕上显示 50 个项目，每当用户到达底部时，加载接下来的 50 个项目。
为此，我们需要跟踪滚动位置并继续将其与文档主体 offsetHeight 进行比较。
要获取滚动位置，我们将使用window.scrollY.
基本上 window.scrollY 给出页面从顶部垂直滚动的像素数。它告诉您用户向下滚动页面的距离。
除了 window.scrollY 之外，我们还将使用另外两个值来检查用户是否已到达页面底部。
window.innerHeight: 这表示窗口可见部分（视口）的高度。这是用户当前在浏览器中无需滚动即可看到的区域的高度。
document.body.offsetHeight: 它给出了 body 元素的总高度。
代码：
import { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
let query = [];
let [items, setitems] = useState(50);
for (let i = 1; i <= items; i++) {
query.push(<p>{i}</p>);
}
useEffect(() => {
const onScroll = () => {
if (
window.innerHeight + window.scrollY >=
document.body.offsetHeight - 40
) {
setitems(items + 50);
}
};
window.addEventListener("scroll", onScroll);
return () => window.removeEventListener("scroll", onScroll);
}, [items]);
return <div className="App">{query.map((q) => q)}</div>;
}
说明：页面的第一次渲染将触发 useEffect 钩子，该钩子将添加滚动事件。每当滚动事件发生时，都会调用 onScroll() 方法，并且它将检查滚动的位置。如果它位于底部 40，则将更多 50 个项目添加到项目状态中。
以上是在react中实现无限滚动的详细内容。更多信息请关注PHP中文网其他相关文章！
