之前在用css實現橫向滾動時，用到了-webkit-overflow-scrolling:touch實現了滾動回彈效果，今天就徹底的認識下這個家伙以及它所帶來的各種坑，並總結了一些排坑的辦法。
一.-webkit-overflow-scrolling是什么東西
-webkit-overflow-scrolling控制元素在移動設備上面是否有滾動回彈效果，它可以設置成auto和touch
auto: 使用普通滾動, 當手指從觸摸屏上移開，滾動會立即停止。 touch: 使用具有回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。
使用touch可以讓滾動條有滾動回彈效果，就像是ios原生的滾動體驗一樣
二.解決safari瀏覽器布局抖動的問題
想實現一個布局為header、main、bottom的布局，其中頭部和底部通過fixed固定，中間部分通過滾動條滑動。
如果目的是實現只要中間的內容超過屏幕高度時，中間內容會自動滾動的效果的話，main部分加上上下的padding，然后不需要自己添加任何滾動條屬性，當超出高度時，
body會自動產生滾動條。這樣我們的目的其實是實現了的。
但是在safari上，當超出高度，頁面往下滑時，瀏覽器底部的工具欄會隨着頁面一起晃動（向下滾動時會拉起底部工具欄），造成了很不好的體驗。所以我們想在中間的main部分 加一個獨立的滾動條。
解決方案一：
在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。
以上是自己在項目過程中遇到的坑，如果小可愛們有發現新的坑，歡迎告知！