ДОМ: Показать div, когда он в поле зрения?

Question

У меня много div элементов (ex: 4000). Итак, в первый раз только у первого div есть display: block у других display: none. И каждый div имеет разную высоту.

<div id="maincontainer">
   <div class="child" style="height:300px;display:block;">page1</div>
   <div class="child" style="height:400px;display:none;">page2</div>
   <div class="child" style="height:200px;display:none;">page2</div>
   <div class="child" style="height:100px;display:none;">page2</div>
   <div class="child" style="height:500px;display:none;">page2</div>
   <div class="child" style="height:600px;display:none;">page2</div>
   <div class="child" style="height:500px;display:none;">page2</div>
   <div class="child" style="height:100px;display:none;">page2</div>
   <div class="child" style="height:400px;display:none;">page2</div>
</div>

Я хочу сделать что-то подобное. Когда я прокручиваю вниз, я хочу отобразить второй элемент (который находится в представлении), и это продолжается для последнего div element. Может кто-нибудь объяснить мне, как это сделать?

Answer 1

Вы можете попробовать добавить событие прокрутки в контейнер, и когда оно достигнет дна, вы загрузите следующий элемент.

const element = document.querySelector('#maincontainer');

element.addEventListener('scroll', function(e) {
   if (this.scrollHeight - this.scrollTop - this.clientHeight <= 0) {
     // load next element here
   }
}

Рабочий пример здесь, также работает, если вы добавляете динамические элементы: https://codepen.io/anon/pen/KLJpad