在做彈出層的時候，頁面內(nèi)容比較高，通常監(jiān)聽頁面的滾動位置重新計算彈出層在頁面中的位置。也許也可以用position:fixed去處理，
IE6又不支持position:fixed，用javascript去算位置會出現(xiàn)操作不順暢的情況，感覺“一閃一閃”的。其實換種思路去做也許也不錯，何不直接干掉頁面的滾動條呢？qq控件的照片瀏覽，以及google+中的照片瀏覽給了一些思路。
第一種，直接設(shè)置html標簽的溢出屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>沒有滾動條的overlay</title>
<script type="text/javascript">
function go(){
document.documentElement.style.overflow="hidden";
document.documentElement.style.paddingRight="17px";
document.documentElement.style.width="100%";
}
function reset(){
document.documentElement.style.overflow="auto";
document.documentElement.style.paddingRight="0px";
document.documentElement.style.width="auto";
}
</script>
</head>
<body>
<div id="d" class="" style="height:1000px;background-color:gray;border:1px solid red; ">
模擬頁面內(nèi)容
<div id="" class="" style="height:500px;">
</div>
<input type="button" id="" name="" onclick="go()" value="去掉頁面滾動條" />
<input type="button" id="" name="" onclick="reset()" value="恢復頁面滾動條" />
</div>
</body>
</html>
利用documentElement元素(就是根htmlDOM)的"擠"走滾動條。
第二種：利用修正position:fixed方法中的div屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>修復IE 6不支持position:fixed & 去掉頁面滾動條</title>
</head>
<body>
<style type="text/css">
html,body,#content{height:100%;overflow:auto;padding:0px;margin:0px;}
#fixed{position:fixed; right:20px; bottom:20px; border:solid 1px blue;_position:absolute;}
</style>
<div id="content" class="">
<div id="" class="" style="background-color:#ccc;height:1000px;">
模擬頁面內(nèi)容
<div id="" class="" style="height:500px">
</div>
<input type="button" id="" name="" value="去掉滾動條" onclick="document.getElementById('content').style.overflow='hidden';"/>
<input type="button" id="" name="" value="恢復滾動條" onclick="document.getElementById('content').style.overflow='auto';"/>
</div>
</div>
<div id="fixed" class="">
fixed content
</div>
</body>
</html>
因為這種修復方法中頁面的滾動條其實是div#content的滾動條，所以只要把他的滾動條去掉了。頁面也就沒有滾動條了。
上述兩種方法思路都不錯，這樣可以放心的彈出層，只要計算一次位置就好，幾乎不影響用戶使用。