如果用户调整窗口大小，我可以采取什么方法来显示＃个元素直到覆盖视口，而无需刷新页面？]

Question

该问题是User Experience Stack Exchange的migrated，因为可以在Stack Overflow上回答。Migrated

[21天前

。

我必须使用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;
    }
  }

但是当用户调整窗口大小时，该代码会中断，如果窗口变小然后变大，则功能将中断，因为用户将永远无法通过滚动到达底部

我认为用户调整大小时会重新加载页面，但是我想这是个坏主意

我必须使用javascript加载多个元素，例如列表。如有必要，我必须填充视口，因为当用户到达容器的底部时，我需要加载更多元素。为此，我需要...

Answer 1

您可以使用window.screen.availHeight填充容器，这总是返回用户正在使用浏览器的屏幕的总高度。您始终可以使用100vh来设置CSS容器的height，这与用户的屏幕尺寸是否小于他的屏幕尺寸无关，因为在循环中，您将屏幕的总高度作为参考。