如何使用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;
});

​

您可以在这里查看样品工作部件。

​

​

Answer 2

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

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_percent = (body.scrollTop - main.offsetTop + body.clientHeight) / total_height;。基本上，如果你可以计算出你的总高度(假设它不是无限的)，那么你就可以用body.clientHeight，+/- offsets除以totalHeight来计算出你在页面的下方有多远。从scroll上的事件侦听器调用它，您就可以开始工作了。

顺便说一句，如果您正在讨论使用的无限滚动库是this，那么它将不再为支持react-infinite-scroller而进行维护。

Answer 3

使用react-infinite-scroll，您不能备份axios请求结果或删除生成的doms。

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

检查有多少doms高于scrollReact，依此类推。