Pagination 如果用户调整窗口大小，我可以用什么方法显示一系列元素，直到覆盖视口，而不必刷新页面？

我必须用javascript加载几个元素，比如列表

如果需要，我必须填充视口，因为当用户到达容器底部时，我需要加载更多元素。为此，我需要知道视口中适合多少元素

我用这个代码填充容器

  for(let i=0; i<lengthDB; i++){
    const card = document.createElement("div")
    const heading = document.createElement("h1")
    const button = document.createElement("button")
    button.textContent = "Click Aqui"

    card.setAttribute("class","card")
    card.appendChild(heading)
    card.appendChild(button)
    window.cardsContainer.appendChild(card)
    counterSpace += document.querySelectorAll(".card")[i].offsetHeight


    if(counterSpace > window.cardsContainer.offsetHeight){
      break;
    }
  }

for（让i=0；i window.cardsContainer.offsetHeight）{
打破
}
}

但是，当用户调整窗口大小时，代码会中断，如果窗口越小越大，功能就会中断，因为用户永远不会通过滚动到达底部

---

我想在用户调整大小时重新加载页面，但我想这不是一个好主意，你可以使用

window.screen.availHeight

来填充容器，它总是返回用户使用浏览器时屏幕的总高度。您始终可以使用

100vh

来设置容器vía CSS的

高度

，无论用户的屏幕是否比他可以的小，因为在您的循环中，您将屏幕的总高度作为参考

if(counterSpace > window.screen.availHeight){
  break;
}

这保证了无论用户是否调整屏幕大小，视口中始终有足够的元素填充容器

if(counterSpace > window.screen.availHeight){
  break;
}