javascript - 如何使用 ReactJS 在用户滚动时更新 array.length 计数器

Question

我正在尝试在我的应用底部添加一个简单的计数器，如下所示:

这是非常简单的 atm，80 是我的 array.length，它是通过我的 axios 请求填充的。

<div>{people.length.toLocaleString()}</div>

当我使用 react-infinite-scroll 向下滚动页面时，数字不断上升，这很好。我要做的是在用户返回页面时减去该数字。

这比我想象的要难吗？如果是这样，请不要给我完整的答案，只需给我要遵循的路径即可。谢谢。

这就是我想要完成的:https://mkorostoff.github.io/hundred-thousand-faces/

Answer 1

您可以通过使用带有 window.innerHeight 的滚动事件和元素底部高度来检查它是否在显示窗口内可用。

您可以尝试使用库本身提供的 onscroll 事件。

let counter = 0;
 [listofElement].find(ele => {
  var conditionHeight = window.innerHeight;
  var cordinat = ele.getBoundingClientRect().top;
  counter++;
  return conditionHeight < cordinat;
});

您可以在此处查看示例工作部分。