詳解iOS中position:fixed吸底時(shí)的滑動出現(xiàn)抖動的解決方案
兩種抖動
為什么抖動還會有兩種？
其實(shí)是我碰到過兩種抖動的場景，第一個(gè)場景是native的抖動，第二個(gè)場景是h5的抖動。
native的抖動
前端開發(fā)人員會在app中打開webview，這個(gè)時(shí)候iOS中position:fixed吸底時(shí)的滑動出現(xiàn)抖動應(yīng)該是native造成的抖動，整個(gè)viewport跟著動，所以可以在生成schema的時(shí)候?qū)?shù)bounce_disable（可能不一定都有這個(gè)參數(shù)，就看有沒有類似的參數(shù)進(jìn)行控制）設(shè)置為1禁止native的彈性效果，然后加上h5的這個(gè)效果，-webkit-overflow-scrolling 屬性可以幫我們實(shí)現(xiàn)這個(gè)效果，它控制元素在移動設(shè)備上是否使用滾動回彈效果。
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;所以在上下方向超出一屏的部分會變成滾動模式并且不溢出，然后這邊吸頂和吸底設(shè)置的高度都是50，所以對應(yīng)的中間滑動部分分別有padding-top:50px;和padding-bottom:50px;設(shè)置box-sizing:border-box;所以padding的增加不會增加.main的高度。
方案二
transform: translateZ(0); -webkit-transform: translateZ(0);
解釋：在使用position:fixed的元素上加上該屬性。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- IOS仿今日頭條滑動導(dǎo)航欄
- ios scrollview嵌套tableview同向滑動的示例
- iOS使用pageViewController實(shí)現(xiàn)多視圖滑動切換
- iOS滑動解鎖、滑動獲取驗(yàn)證碼效果的實(shí)現(xiàn)代碼
- 微信小程序在ios下Echarts圖表不能滑動的問題解決
- 微信瀏覽器彈出框滑動時(shí)頁面跟著滑動的實(shí)現(xiàn)代碼（兼容Android和IOS端）
- iOS 頁面滑動與標(biāo)題切換顏色漸變的聯(lián)動效果實(shí)例
- IOS開發(fā)中禁止NavigationController的向右滑動返回
- iOS開發(fā)上下滑動UIScrollview隱藏或者顯示導(dǎo)航欄的實(shí)例
- iOS實(shí)現(xiàn)無限滑動效果
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于如何在MAC系統(tǒng)下安裝FFmpeg的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
本文主要介紹了iOS使用Charts框架繪制柱形圖的方法，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2016-12-12
這篇文章主要介紹了仿IOS效果，帶彈簧動畫的ListView，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了蘋果公司推出的新編程語言Swift簡介和入門教程,Swift是蘋果于WWDC 2014.6.3發(fā)布的編程語言,主要用來替代Objective-C,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了Swift 訪問權(quán)限的資料整理的相關(guān)資料,希望通過本文大家能掌握這部分內(nèi)容，需要的朋友可以參考下2017-09-09
iOS App中調(diào)用相冊中圖片及獲取最近的一張圖片的方法
這篇文章主要介紹了iOS App中調(diào)用相冊中圖片及獲取最近的一張圖片的方法,示例代碼為傳統(tǒng)的Objective-C語言,需要的朋友可以參考下2016-03-03
iOS基于UITableView實(shí)現(xiàn)多層展開與收起
這篇文章主要為大家詳細(xì)介紹了iOS基于UITableView實(shí)現(xiàn)多層展開與收起的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
CAMediaTiming （ 時(shí)間協(xié)議）詳解及實(shí)例代碼
這篇文章主要介紹了CAMediaTiming / 時(shí)間協(xié)議詳解及實(shí)例代碼的相關(guān)資料,這里附有實(shí)例代碼，幫助大家學(xué)習(xí)參考，需要的朋友可以參考下2016-12-12
iOS自定義UIScrollView的滾動條實(shí)例代碼
本篇文章主要介紹了iOS自定義UIScrollView的滾動條實(shí)例代碼，詳細(xì)的介紹了自定義滾動條的示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
iOS UILabel根據(jù)內(nèi)容自動調(diào)整高度
這篇文章主要為大家詳細(xì)介紹了iOS UILabel根據(jù)內(nèi)容自動調(diào)整高度，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06