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. 谁能解释我如何做这件事？