Javascript 如何使用ReactJS在用户滚动上更新array.length计数器

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

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

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

{people.length.toLocaleString（）}

当我向下滚动页面时，使用

react infinite scroll

，数字会不断上升，这很好。我试图做的是在用户返回页面时减去数字

这是不是比我想象的更难？如果是这样的话，不要给我完整的答案，只要告诉我要走的路就行了。谢谢

---

这就是我试图实现的目标：

查看链接页面的源代码，代码使用此函数获取页面大小：

function getScrollPercent() {
  var face_width = document.getElementById('first').clientWidth;
  var face_height = document.getElementById('first').clientHeight;
  var body = document.documentElement || document.body;
  var faces_per_row = Math.floor(main.clientWidth / face_width);
  var total_height = total / faces_per_row * face_height;
  var scroll_percent = (body.scrollTop - main.offsetTop + body.clientHeight) / total_height;
  var count = Math.floor(scroll_percent * total);

  var chunked_count = count - (count % faces_per_row);

  if (chunked_count > 0) {
    counter.classList = "fixed";
  }
  else {
    counter.classList = "";
  }
  return (chunked_count > 0) ? chunked_count : 0;
}

基本位是

var scroll\u percent=（body.scrollTop-main.offsetTop+body.clientHeight）/总高度。基本上，如果您可以计算总高度（假设不是无限高），那么您可以使用
body.clientHeight
，+/-offset，除以
totalHeight
，计算出页面下方的距离。通过事件侦听器在
滚动
上调用此命令，您应该可以开始了

顺便说一句，如果您正在谈论使用的是无限滚动库，则不再支持它。
使用
react infinite scroll
，您无法支持axios请求结果或删除生成的DOM

解决方案是计算每个DOM的宽度和高度，并计算偏移量

检查scrollReact上方有多少个DOM，依此类推。
您可以使用scroll event with
窗口。innerHeight
和元素底部高度来检查其是否在显示窗口内可用

您可以使用onscroll事件进行类似的尝试，该事件在库本身中可用


let计数器=0；
[列表元素].find（元素=>{
var conditionHeight=window.innerHeight；
var cordinat=ele.getBoundingClientRect（）.top；
计数器++；
返回条件高度});
如果您希望计数器不反映通过axios检索的项目总数，而是反映他们当前已滚动到页面上的项目，那么您可能需要深入研究使用一些普通DOM API来检测当前屏幕上的项目这一令人不快的业务。也许其他人可以想出更好的办法。你可能会考虑寻找一个开源库来帮助你实现这一点，因为在考虑边缘情况和浏览器支持的情况下可能会有点混乱。你能在反应中重现吗？我不能打招呼，谢谢你的评论。你的答案似乎正是我所需要的，但我很难把它转换成钩子。你能帮我，然后我就可以选择你的答案作为赢家吗？问题是使用计数器变量作为引用和元素计数器，在任何地方更改变量名称，都会起作用。