gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 16:25:30 25 4
gpt4 key购买 nike

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

counter image

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

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

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

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

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

最佳答案

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

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

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

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

Edit rough-violet-1qysy

关于javascript - 如何使用 ReactJS 在用户滚动时更新 array.length 计数器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62400291/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com