如何使用IntersectionObserver制作无限滚动器，以使其不会触底？

Question

我正在尝试使用range_ = graph.getViewBox().viewRange() graph.getViewBox().setLimits(xMin=range_[0][0], xMax=range_[0][1], yMin=range_[1][0], yMax=range_[1][1]) 构建一个简单的纯Javascript无限滚动器。从某种意义上说，当您滚动到末尾时，会加载更多的项目，因此我可以部分地使用它。如果您缓慢滚动 ，则“无限”效果将起作用。但是，当您快速滚动到底部（尤其是一遍又一遍）时，它会触底，破坏了“无限”效果。 （虽然在Chrome浏览器中代码虽然效果更好，但最终还是会跌倒，而Firefox却很快跌倒）。我尝试了各种技巧，包括将触发元素放在列表底部的上方（例如，在最后五个项目之前，以便它可以尽早触发），但这并不总是有效。几乎就像我需要一个负阈值选项，但这不属于IntersectionObserver的规范。

关于如何使此代码的滚动效果显得无限的任何建议，尤其是在Firefox中？

这是我的HTML：

IntersectionObserver

这是Javascript：

  <div id="items"></div>
  <div id="trigger"></div>

最后，这里是CodePen demo。

Answer 1

这是一个真正的无限数据集，还是可以估算项目总数？如果您知道数据集中的记录总数，则可以将空白行/ div呈现为占位符，以将页面扩展到大约总滚动高度，并在div进入图片时延迟加载结果，如IntersectionObserver。