js,css三种方法解决IE6下position:fixed的Bug以及闪动问题

IE6下position:fixed的Bug应该是个老问题。不过,今天在搞瀑布流插件写返回顶部按钮时(老是闪动)却花了我不少时间,之前也写过一篇文章解决过,但是是用到css表达式解决,而现在的需求是要在js中动态定位,所以之前的办法不是很合适。今天再来总结一下:

方法一:纯css

*html{height:100%;overflow:hidden;}
*html body{height:100%;overflow:auto;}

原理:你拖动的滚动条并不是拖动的整个页面,而仅是body的滚动条

优点:视觉效果完美,代码量少,不耗性能

缺点:不会触发onscroll事件(因为html没有滚动),可能会影响一些js组件; fixed定位层必须是基于body层定位的。

方法二:css + expression

完美解决IE6下position:fixed的Bug;以及闪动问题

原理:ie6使用绝对定位,利用css表达式计算相应的值

优点:视觉效果完美,兼容性强

缺点:相对比较耗性能,不够灵活,而且你可能会遇到这样的Bug(点击查看)

方法三:js

View Code
// usage:
// fixedPosition(elem, {top:0, left:0});
// fixedPosition(elem, {bottom:0, right:0});
var fixedPosition = function(){
    var html = document.getElementsByTagName('html')[0],
        dd = document.documentElement,
        db = document.body,
        doc = dd || db;
    
    // 给IE6 fixed 提供一个"不抖动的环境"
    // 只需要 html 与 body 标签其一使用背景静止定位即可让IE6下滚动条拖动元素也不会抖动
    // 注意:IE6如果 body 已经设置了背景图像静止定位后还给 html 标签设置会让 body 设置的背景静止(fixed)失效
    if (isIE6 && db.currentStyle.backgroundAttachment !== 'fixed') {
        html.style.backgroundImage = 'url(about:blank)';
        html.style.backgroundAttachment = 'fixed';
    };
    
    // pos = {top:0, right:0, bottom:0, left:0}
    return isIE6 ? 
        function(elem, pos){
            var style = elem.style,
                dom = '(document.documentElement || document.body)'; 
            
            if(typeof pos.left !== 'number'){
                pos.left = doc.clientWidth - pos.right - elem.offsetWidth; 
            }
            if(typeof pos.top !== 'number'){
                pos.top = doc.clientHeight - pos.bottom - elem.offsetHeight; 
            }
            
            elem.style.position = 'absolute';
            style.removeExpression('left');
            style.removeExpression('top');
            style.setExpression('left', 'eval(' + dom + '.scrollLeft + ' + pos.left + ') + "px"');
            style.setExpression('top', 'eval(' + dom + '.scrollTop + ' + pos.top + ') + "px"');
        } : 
        function(elem, pos){
            var style = elem.style;
                
            style.position = 'fixed';
            
            if(typeof pos.left === 'number'){
                style.left = pos.left + 'px';
            }else{
                style.left = 'auto'; 
                style.right = pos.right + 'px';
            }
            
            if(typeof pos.top === 'number'){
                style.top = pos.top + 'px';
            }else{
                style.top = 'auto'; 
                style.bottom = pos.bottom + 'px';
            }
         
        };
}();

原理:原理同上,动态设置expression,如果直接在onscroll事件里设置定位层的top,left,bottom,right,定位层会出现闪动;

优点:动态控制定位层的位置

缺点:还是使用了css表达式

方法四:舍弃IE6

原理:Bug之来源,应该淘汰

优点:彻底根除Bug

缺点:暂无

扩展:离奇解决

http://bbs.blueidea.com/thread-2938030-1-1.html

原理:没搞懂,推测跟浏览器的重绘[repaints]与重排[reflows]有关

 

如果读者还有其他更好的方法,希望能够分享一下,欢迎加入web前端交流群(75701468) 分享您我的经验.

 

 

posted @ 2013-04-23 11:41  无赖君子  阅读(2282)  评论(5编辑  收藏  举报