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） 分享您我的經驗.