工作中發現,給一個元素添加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;
還有一種方法說可以用絕對定位模擬固定定位,本人么有模擬出來,網上提供的方法也沒有實現這個效果。