make page stop scrolling when lightbox is active

I have the following lightbox which includes a form. Everything works fine. My only problem is how to make the html page stop scrolling when the lightbox is active. ``` <a href = "javascript:void(0)" onclick=" document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'"> <img src="img/add.jpg"/></a></p> <div id="light" class="white_content"> <input name="degree_1" type="text" size="73" value="<?php echo $user_data_profile_education['degree_1'];?>"/> </br></br> Grade</br> <input name="grade_1" type="text" size="73" value="<?php echo $user_data_profile_education['grade_1'];?>"/> <a href = "javascript:void(0)" onclick=" document.getElementById('light').style.display='none'; document.getElementById('fade').style.display='none'"> </br><img src="img/done_editing.jpg"/> </a></div> <div id="fade" class="black_overlay"></div> ``` and this is my css: ``` .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 220%; background-color: grey; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 45%; left: 30%; width: 32%; height: 51%; padding: 30px; padding-left:50px; border: 5px solid green; background-color: white; z-index:1002; overflow: auto; } ```