javascript - DOM：显示元素仅在视口中呈现？

Question

我只想在视口中显示元素。例如，我有以下模型 dom。

<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>

以及它的样式属性

#maincontainer {
  height: 500px;
}

现在的视口maincontainer是500px. 当我滚动时，我只想显示maincontainer（在 中显示块元素maincontainer）中的元素。我怎样才能做到这一点？任何人，请帮我解决这个问题。

标签： javascriptjqueryhtmlperformance