采用scrollTop实现拖动效果时出现不停闪动问题

我做了一个浮动在浏览器中间的浮动框，拖动浏览器滚动条时还是在浏览器中间显示，但实际出来的效果是在ie/ff/opera这些浏览器里面拖动滚动条时这个浮动框会不停的闪动，而在safari/chrome这些webkit浏览器里面却是正常的。
这个需要兼容ie6，不然直接使用positon:fixed属性了，有无解决办法？<!DOCTYPE html>
<html>
<head>
<title>JavaScript + CSS</title>
<style type="text/css">
html,body,div,h1,h2{ margin:0; padding:0; border:0; font-size:100%; }
html{ background:url(about:blank) fixed; }
body{ padding:1em; color:#900; background:#f90; }
h1{ font-size:3em; color:#900; line-height:2; }
h2{ font-size:2em; color:#666; line-heiht:2; height:500px; }
#htmlBg{ position:absolute; left:0; top:0; z-index:100; background:#333; opacity:0.6; filter:Alpha(Opacity=60); width:600px; height:600px; }
#msg{ position:absolute; left:0; top:0; z-index:200; width:300px; padding:10px; border:6px solid #444; background:#333; font-size:2em; font-weight:bold; text-align:center; color:#666; line-height:1.6;  -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px; }
</style>
</head>
<body>
<h1>software</h1>
<h2>photoshop</h2>
<h2>illustrator</h2>
<h2>fireworks</h2>
<h2>flash</h2>
<h2>dreamweaver</h2>
<h2>iwork</h2>
<h2>microsoft office</h2>
<div id="lightBox">
<div id="htmlBg"></div>
<div id="msg">name<br>version<br>level</div>
</div>
<script type="text/javascript">
var htmlBg=document.getElementById("htmlBg");
var msg=document.getElementById("msg");
var hWidth,hHeight, hScrollTop,hScrollLeft, bWidth,bHeight;
function lightBox(){
if(document.compatMode=="CSS1Compat"){
hWidth=document.documentElement.scrollWidth;
hHeight=document.documentElement.scrollHeight;
bWidth=document.documentElement.clientWidth;
bHeight=document.documentElement.clientHeight;
}
else{
hWidth=document.body.scrollWidth;
hHeight=document.body.scrollHeight;
bWidth=document.body.clientWidth;
bHeight=document.body.clientHeight;
}
hScrollTop=document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
hScrollLeft=document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft;
msg.style.top=(hScrollTop+(bHeight/2-msg.offsetHeight/2))+"px";
msg.style.left=(hScrollLeft+(bWidth/2-msg.offsetWidth/2))+"px";
htmlBg.style.width=hWidth+"px";
htmlBg.style.height=hHeight+"px";
}
window.onload=lightBox;
window.onscroll=lightBox;
window.onresize=lightBox;
</script>
</body>
</html>

解决方案 »

  1.   

    在css里加上这一段就行了
    html{
    _background:url("about:blank");
    _background-attachment:fixed;
    }
      

  2.   

    你判断下是不是IE6就行了.
    <!DOCTYPE html>
    <html>
    <head>
    <title>JavaScript + CSS</title>
    <style type="text/css">
    html{
    _background:url("about:blank");
    _background-attachment:fixed;
    }
    html,body,div,h1,h2{ margin:0; padding:0; border:0; font-size:100%; }
    html{ background:url(about:blank) fixed; }
    body{ padding:1em; color:#900; background:#f90; }
    h1{ font-size:3em; color:#900; line-height:2; }
    h2{ font-size:2em; color:#666; line-heiht:2; height:500px; }
    #htmlBg{ position:absolute; left:0; top:0; z-index:100; background:#333; opacity:0.6; filter:Alpha(Opacity=60); width:600px; height:600px; }
    #msg{ position:absolute; left:0; top:0; z-index:200; width:300px; padding:10px; border:6px solid #444; background:#333; font-size:2em; font-weight:bold; text-align:center; color:#666; line-height:1.6;  -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px; }
    </style>
    </head>
    <body>
    <h1>software</h1>
    <h2>photoshop</h2>
    <h2>illustrator</h2>
    <h2>fireworks</h2>
    <h2>flash</h2>
    <h2>dreamweaver</h2>
    <h2>iwork</h2>
    <h2>microsoft office</h2>
    <div id="lightBox">
        <div id="htmlBg"></div>
        <div id="msg">name<br>version<br>level</div>
    </div>
    <script type="text/javascript">
    var htmlBg=document.getElementById("htmlBg");
    var msg=document.getElementById("msg");
    var hWidth, hHeight, hScrollTop, hScrollLeft, bWidth, bHeight;
    var isIE6 = /msie 6/i.test(navigator.userAgent);//=============
    function lightBox() {
        if (document.compatMode == "CSS1Compat") {
            hWidth = document.documentElement.scrollWidth;
            hHeight = document.documentElement.scrollHeight;
            bWidth = document.documentElement.clientWidth;
            bHeight = document.documentElement.clientHeight;
        }
        else {
            hWidth = document.body.scrollWidth;
            hHeight = document.body.scrollHeight;
            bWidth = document.body.clientWidth;
            bHeight = document.body.clientHeight;
        }
        hScrollTop = isIE6 ? document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop : 0;//=======
        hScrollLeft = isIE6 ? document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft : 0;//=======
        msg.style.top = (hScrollTop + (bHeight / 2 - msg.offsetHeight / 2)) + "px";
        msg.style.left = (hScrollLeft + (bWidth / 2 - msg.offsetWidth / 2)) + "px";
        if (!isIE6) msg.style.position = 'fixed';//=======
        htmlBg.style.width = hWidth + "px";
        htmlBg.style.height = hHeight + "px";}
    window.onload = lightBox;
    window.onresize = lightBox;
    if(isIE6)window.onscroll = lightBox;//=======
    </script>
    </body>
    </html>
      

  3.   

    #2楼的代码兼容FF，但是不兼容IE8，360，世界之窗，搜狗，IE6