divを一度ビューポートに表示

Question

私は10個のdiv要素を持っていますが、それらはすべて500pxの幅と高さです。

<div class="cont_1">a lots of content here..</div> 
<div class="cont_2">a lots of content here..</div> 
<div class="cont_3">a lots of content here..</div> 
<div class="cont_4">a lots of content here..</div> 
<div class="cont_5">a lots of content here..</div> 
<div class="cont_6">a lots of content here..</div> 
<div class="cont_7">a lots of content here..</div> 
<div class="cont_8">a lots of content here..</div> 
<div class="cont_9">a lots of content here..</div> 
<div class="cont_10">a lots of content here..</div> 

と私のCSS

div{ 
width:500px; 
height:500px; 
background:#f0f0f0; 
border:1px solid #ccc; 
margin:10px; 
padding:10px; 
} 

そして、私の第七のdivはdisplay:noneで隠されています。ユーザーがこの要素にスクロールすると、どのように表示できますか？あなたがスクロールした後、各要素の位置を確認し、あなたのページにスクロールイベントを添付する必要があります

Answer 1

：

function CheckIfVisible(elem){ 
var ElemPos = elem.getBoundingClientRect().top; 
elem.style.display = (ElemPos > 0 && ElemPos < document.body.parentNode.offsetHeight)?"block":"none"; 
} 

window.addEventListener("onscroll", function(){ 
var elem = document.getElementsByClassName("cont_1")[0]; 
CheckIfVisible(elem); 
}); 

window.addEventListener("onscroll", function(){ 
var elem = document.getElementsByClassName("cont_2")[0]; 
CheckIfVisible(elem); 
}); 

window.addEventListener("onscroll", function(){ 
var elem = document.getElementsByClassName("cont_3")[0]; 
CheckIfVisible(elem); 
}); 

などを...