DOM：在视图中显示 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