即使在 React 中到达底部，页面也不会向下滚动？答案

【问题标题】：Page not scrolling down even though when reached bottom in React?即使在 React 中到达底部，页面也不会向下滚动？
【发布时间】：2021-04-13 15:39:48
【问题描述】：

在一个 React 项目中，我将某些项目映射为初始大小为 5，当到达底部时，预计会加载更多 5 个项目，并随着页面超过 40 个而相应增加。它就像无限滚动。但是，这里滚动停止，只有 15 个元素和第 3 页。以下是参考代码

const [state, setState] = useState([]);
const [page, setPage] = useState(PAGE_NUMBER);

const scrollToEnd = () => {
  setPage(page + 1);
};

console.log("Page", page);

useEffect(() => {
  fetch(`https://api.instantwebtools.net/v1/passenger?page=${page}&size=5`)
    .then((res) => res.json())
    .then((json) => setState([...state, ...json.data]));
}, [page]);

window.onscroll = function () {
  if (
    window.innerHeight + document.documentElement.scrollTop ===
    document.documentElement.offsetHeight
  ) {
    scrollToEnd();
  }
};

return (
  <>
    {state.length > 0 &&
      state.map((el, i) => (
        <div key={i} className="container">
          <h4>{el.id}</h4>
          <h4>{el.name}</h4>
        </div>
      ))}
  </>
);

高度赞赏任何适当的解决方案

下面是codeandbox链接：https://codesandbox.io/s/material-demo-forked-sn31v

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您可以添加一个 useEffect 并在该 useEffect 中添加一个用于滚动的事件侦听器并检查用户滚动是否足够。

工作克隆项目：https://codesandbox.io/s/material-demo-forked-rr9th

useEffect(() => {
    const eventListener = document.addEventListener("scroll", () => {
      const windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
      // user scrolled enough
      if (windowRelativeBottom <= document.documentElement.clientHeight + 100) {
        setPage(pageCount => pageCount + 1);
      }
    })
  }, [])

资源

https://javascript.info/onscroll

【讨论】：