在react中实现无限滚动

在我们开始编码之前，如果您想了解更多关于什么是分页以及我们为什么需要它的信息，请在这里查看我的博客。

假设要求在屏幕上显示 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中文网其他相关文章！