React 滚动到底部仅适用于第一次（内部演示）

Posted 2023-02-21

【中文标题】React 滚动到底部仅适用于第一次（内部演示）

【英文标题】：React scroll to bottom only works for the first time (demo inside)

【发布时间】：2021-06-19 03:41:02

【问题描述】：

我有一个反应项目，我正在尝试实现无限滚动，但不知道为什么它只检测一次底部，从下一次开始，值总是有 1 个像素的差异，所以它永远不会与element.clientHeight匹配

下面是我用来检测滚动到底部的代码

Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight

展望未来，我实际上想在 axios 调用到达底部之前触发 200 像素，因此同时我可以获取数据并附加到底部，这样用户就不必等待数据加载。

我创建了与我的项目 CodeSandbox demo 有相同问题的演示仓库

【问题讨论】：

任何线索都会有所帮助

是否有其他网站可供我们提问/回答问题？堆栈溢出似乎很干。

我已经在 Firefox 和 Chrome 上进行了尝试，似乎两者都可以正常工作。一旦我到达列表的底部，总是会加载新数据并且我可以继续平滑滚动。也许我做错了什么？您正在使用哪种浏览器？

我正在使用 chrome，我也尝试过 edge。我坚持在 39 岁。

您不必在滚动时设置监听器。将一些 div 放在页面/容器的底部并听 itersection。 （这是更多的表现）如果它会相交然后加载新内容会影响将这个差异转移到屏幕底部。 Agian 如果它会出现然后加载更多。 （您可以在任何容器上设置交叉点观察者根）

【参考方案1】：

element.scrollTop - 从顶部滚动了多少， element.scrollHeight - 元素的整个滚动高度（内容可见和不可见）， element.offsetHeight - 当前可见高度

向下滚动时，scrollTop增加，

所以你想向下滚动到底部， 换句话说，您希望从顶部移动的距离（高度）加上元素可见部分的高度等于整个元素的高度：

element.scrollTop + element.offsetHeight = element.scrollHeight

我们可以这样写：

element.scrollTop = element.scrollHeight - element.offsetHeight

因此，如果您希望在到达底部之前发生一些动作，只需从 element.scrollHeight 中减去该像素量，例如 200px：

element.scrollTop = (element.scrollHeight - 200) - element.offsetHeight

或者这样让它即使在我们经过距离后也能工作：

element.scrollTop >= element.scrollHeight - element.offsetHeight - 200

此外，当使用带有 ref 的元素内滚动 (div) 时，您可能希望将事件侦听器添加到 scrollRef.current，而不是窗口

componentDidMount() 
  this.loadList();
  this.scrollRef.current.addEventListener("scroll", this.handleScroll, true);

并在卸载时移除事件监听器

componentWillUnmount() 
  this.scrollRef.current.removeEventListener("scroll", this.handleScroll);

这应该可行：

CodeSandbox demo