如何显示足够的孩子以垂直填充父母

Question

我正在编写一个简单的无限滚动器。使用IntersectionObserver时，滚动方面运行良好，但是初始设置存在问题。

简单来说，我的HTML是

<div id="scroller">
  <div style="display:block">item 1</div>
  <div style="display:block">item 2</div>
  <div style="display:hidden">item 3</div>
  <div style="display:hidden">item 4</div>
  <div style="display:hidden">item 5</div>
...
  <div id="sentinel" style="height:1px;width:1px"></div>
</div>

请注意，这些项目都是用户生成的内容，因此每个项目的数量和垂直高度仅在运行时确定。

我的问题是，我如何知道多少个项目的初始样式应为“ display：block”，以使它们填满#scroller（并将#sentinel推下底部）。一个典型的使用IntersectionObserver的博客描述通过说“选择一个填充滚动条的初始值”来跳过该问题，但是在我的情况下，取决于显示高度和内容高度，它可以是1到100之间的任何数字，并且我很热衷最大限度地减少了冗余渲染的数量。