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

DOM：在视图中显示div吗？

1 个答案: