移動端fixed的元素抖動的問題

標籤：高度   div   sla   滑動頁面   tac   qq瀏覽器   絕對位置   absolute   比較   

工作中發現，給一個元素添加fixed屬性，讓它固定在視窗某個位置，直接加fposition:fixed屬性就能實現這個效果；

在安卓手機上的效果都比較好，但是ios系統的個別瀏覽器安全色性就不好，如QQ瀏覽器、UC瀏覽器、360瀏覽器（這幾個是ios最容易出問題的瀏覽器）；

問題：當使用者快速滑動頁面的到時候，fixed的元素就會在視窗跳動或者抖動，非常影響使用者體驗

下面提供幾個解決方案，僅供參考，如有更好更有效解決辦法，歡迎留言交流探討！

 

方法一：

給body設定高度100%

body,html{    widht:100%;    height:100%;}

這個方法很有效，但是適用於自己單獨開發的頁面。

如果是項目中已經做好的頁面，有其他特效，直接設定這個屬性，可能對頁面的其他功能造成影響。

如果使用此法，本地調試效果不好，建議不要使用。

 

方法二：

給fixed的元素添加背景定位的屬性

background-attachment：fixed；

切忌：這個屬性不要給有背景圖片的元素添加

這個方法看起來也生效了，由於身邊沒有測試機的限制，無法測試效果，有條件的朋友可以試一下；

 

下面是網路上查到的其他方法，我試過沒起作用，列出來供大家參考

方法三：

給固定定位的元素添加transform屬性

transform:translateZ(0);或者transform:translate3d(0,0,0);

我嘗試的結果是，這個方法沒有起效；

 

方法四：

多加一層盒子，外層fixed固定定位，內層的設定絕對位置absolute；

 

還有一種方法說可以用絕對位置類比固定定位，本人麼有類比出來，網上提供的方法也沒有實現這個效果。

 

 

 

 

移動端fixed的元素抖動的問題