以前在用css實現橫向滾動時,用到了-webkit-overflow-scrolling:touch實現了滾動回彈效果,今天就完全的認識下這個傢伙以及它所帶來的各類坑,並總結了一些排坑的辦法。css
一.-webkit-overflow-scrolling是什麼東西html
-webkit-overflow-scrolling控制元素在移動設備上面是否有滾動回彈效果,它能夠設置成auto和touchios
auto
: 使用普通滾動, 當手指從觸摸屏上移開,滾動會當即中止。 touch
: 使用具備回彈效果的滾動, 當手指從觸摸屏上移開,內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。web
使用touch可讓滾動條有滾動回彈效果,就像是ios原生的滾動體驗同樣瀏覽器
二.解決safari瀏覽器佈局抖動的問題工具
想實現一個佈局爲header、main、bottom的佈局,其中頭部和底部經過fixed固定,中間部分經過滾動條滑動。佈局
若是目的是實現只要中間的內容超過屏幕高度時,中間內容會自動滾動的效果的話,main
部分加上上下的padding
,而後不須要本身添加任何滾動條屬性,當超出高度時,spa
body
會自動產生滾動條。這樣咱們的目的實際上是實現了的。code
可是在safari上,當超出高度,頁面往下滑時,瀏覽器底部的工具欄會隨着頁面一塊兒晃動(向下滾動時會拉起底部工具欄),形成了很很差的體驗。因此咱們想在中間的main
部分 加一個獨立的滾動條。htm
解決方案一:
在main上使用fixed定位,加上overflow-y屬性。
.main { position: fixed; top: 50px; bottom: 50px; overflow-y: scroll; }
不過不推薦這個fixed方案,由於頁面偶爾卡住不動,下面說到了這個問題。
解決方案二:
中間的main不設定位,高度100%,再padding頭部和尾部,
其中頭部和底部的定位設爲absolute
會比設爲fixed
體驗更好(何況fix佈局在移動端原本就有各類各樣的問題,仍是儘可能避開:) )。
大體代碼以下,還是 overflow-y
和-webkit-overflow-scrolling
,重點在於中間部分依照文本流佈局。
html, body { height: 100%; }
.main { padding: 50px 0; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
三.探究-webkit-overflow-scrolling:touch 偶爾卡住或不能滑動的bug
最多見的例子就是,
- 在safari上,使用了
-webkit-overflow-scrolling:touch
以後,頁面偶爾會卡住不動。- 在safari上,點擊其餘區域,再在滾動區域滑動,滾動條沒法滾動的bug。
- 經過動態添加內容撐開容器,結果根本不能滑動的bug。
相應的解決辦法有,本身對應本身問題,找解決辦法:
3.1保證使用該屬性的元素上沒有設置定位
若是出現偶爾卡住不動的狀況,那麼在使用該屬性的元素上不設置定位或者手動設置定位爲static
position: static
這樣會解決部分由於定位(relative、fixed、absolute)致使的頁面偶爾不能滾動的bug。
3.2 若是添加動態內容頁面不能滾動,讓子元素height+1
若是在-webkit-overflow-scrolling:touch
屬性的元素上,想經過動態添加內容來撐開容器,觸發滾動,是有bug 的,頁面是會卡住不動的。
解決方法就是在webkit-overflow-scrolling:touch
屬性的下一層子元素上,將height加1%或1px。從而主動觸發scrollbar。
以上是本身在項目過程當中遇到的坑,若是小可愛們有發現新的坑,歡迎告知!