iOS中position:fixed吸底時的滑動出現抖動的解決方案
阿新 • • 發佈:2019-02-15
兩種抖動
為什麼抖動還會有兩種?
其實是我碰到過兩種抖動的場景,第一個場景是native的抖動,第二個場景是h5的抖動。
native的抖動
前端開發人員會在app中開啟webview,這個時候iOS中position:fixed吸底時的滑動出現抖動應該是native造成的抖動,整個viewport跟著動,所以可以在生成schema的時候將引數bounce_disable(可能不一定都有這個引數,就看有沒有類似的引數進行控制)設定為1禁止native的彈性效果,然後加上h5的這個效果,-webkit-overflow-scrolling 屬性可以幫我們實現這個效果,它控制元素在移動裝置上是否使用滾動回彈效果。
h5的抖動
方案一
//我是吸頂頭部
.header{
width:100%;
height:50px;
position:fixed;
top:0px;
}
//我是中間要滑動的部分
.main{
width:100%;
height:auto;
position:absolute;
padding-top:50px;
padding-bottom:50px;
box-sizing:border-box;
overflow-y:scroll;
}
//我是吸底尾部
.footer{
width:100%;
height :50px;
position:fixed;
bottom:0px;
}
解釋:滑動部分overflow-y:scroll;所以在上下方向超出一屏的部分會變成滾動模式並且不溢位,然後這邊吸頂和吸底設定的高度都是50,所以對應的中間滑動部分分別有padding-top:50px;和padding-bottom:50px;設定box-sizing:border-box;所以padding的增加不會增加.main的高度。
方案二
transform: translateZ(0);
-webkit-transform: translateZ(0);
解釋:在使用position:fixed的元素上加上該屬性。