在做彈出層的時(shí)候，頁(yè)面內(nèi)容比較高，通常監(jiān)聽(tīng)頁(yè)面的滾動(dòng)位置重新計(jì)算彈出層在頁(yè)面中的位置。也許也可以用position:fixed去處理，
IE6又不支持position:fixed，用javascript去算位置會(huì)出現(xiàn)操作不順暢的情況，感覺(jué)“一閃一閃”的。其實(shí)換種思路去做也許也不錯(cuò)，何不直接干掉頁(yè)面的滾動(dòng)條呢？qq控件的照片瀏覽，以及google+中的照片瀏覽給了一些思路。
第一種，直接設(shè)置html標(biāo)簽的溢出屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>沒(méi)有滾動(dòng)條的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; ">
模擬頁(yè)面內(nèi)容
<div id="" class="" style="height:500px;">
</div>
<input type="button" id="" name="" onclick="go()" value="去掉頁(yè)面滾動(dòng)條" />
<input type="button" id="" name="" onclick="reset()" value="恢復(fù)頁(yè)面滾動(dòng)條" />
</div>
</body>
</html>
利用documentElement元素(就是根htmlDOM)的"擠"走滾動(dòng)條。
第二種：利用修正position:fixed方法中的div屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>修復(fù)IE 6不支持position:fixed & 去掉頁(yè)面滾動(dòng)條</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;">
模擬頁(yè)面內(nèi)容
<div id="" class="" style="height:500px">
</div>
<input type="button" id="" name="" value="去掉滾動(dòng)條" onclick="document.getElementById('content').style.overflow='hidden';"/>
<input type="button" id="" name="" value="恢復(fù)滾動(dòng)條" onclick="document.getElementById('content').style.overflow='auto';"/>
</div>
</div>
<div id="fixed" class="">
fixed content
</div>
</body>
</html>
因?yàn)檫@種修復(fù)方法中頁(yè)面的滾動(dòng)條其實(shí)是div#content的滾動(dòng)條，所以只要把他的滾動(dòng)條去掉了。頁(yè)面也就沒(méi)有滾動(dòng)條了。
上述兩種方法思路都不錯(cuò)，這樣可以放心的彈出層，只要計(jì)算一次位置就好，幾乎不影響用戶(hù)使用。