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


工作中發現,給一個元素添加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;

 

還有一種方法說可以用絕對定位模擬固定定位,本人么有模擬出來,網上提供的方法也沒有實現這個效果。

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM