Какой подход я могу использовать, чтобы отображать количество элементов до тех пор, пока они не покроют область просмотра, без необходимости обновлять sh страницу, если пользователь изменит размер окна?

Question

Мне нужно загрузить несколько элементов, например список, с помощью 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;
    }
  }

Но этот код ломается, когда пользователь изменяет размер окна, если окно Чем меньше, а затем больше, функциональность сломается, потому что пользователь никогда не достигнет дна, прокручивая

Я думаю, что перезагрузить страницу при изменении размера пользователя, но я думаю, что это плохая идея

Answer 1

Вы можете использовать window.screen.availHeight для заполнения контейнера, это всегда возвращает общую высоту экрана, где пользователь использует браузер. вы всегда можете использовать 100vh для установки height вашего контейнера через CSS, не имеет значения, если у пользователя экран меньше, чем он может, так как в вашем l oop вы берете в качестве эталона общую высоту экран.

эта гарантия в области просмотра всегда есть достаточно элементов для заполнения контейнера, независимо от того, изменяет ли пользователь размер экрана.

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