javascript - DOM : Display div when it's in the view?

Question

我有很多 div 元素 (例如: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>

我想做这样的事情。当我向下滚动时，我想显示第二个元素(在 View 中)，最后一个 div 元素 也是如此。任何人都可以向我解释如何做这件事吗？

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