在移動端上，在你用overflow-y:scorll屬性的時候，你會發現滾動的效果很木，很慢，這時候可以使用-webkit-overflow-scrolling:touch這個屬性，讓滾動條產生滾動回彈的效果，就像ios原生的滾動條一樣流暢。
-webkit-overflow-scrolling 屬性控制元素在移動設備上是否使用滾動回彈效果.
auto: 使用普通滾動, 當手指從觸摸屏上移開，滾動會立即停止。
touch: 使用具有回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。
2. 解決safari布局抖動的例子
想實現一個布局為header、main、bottom的布局，其中頭部和底部通過fixed固定，中間部分通過滾動條滑動。
如果目的是實現只要中間的內容超過屏幕高度時，中間內容會自動滾動的效果的話，main部分加上上下的padding，然后不需要自己添加任何滾動條屬性，當超出高度時，body會自動產生滾動條。這樣我們的目的其實是實現了的。
但是在safari上，當超出高度，頁面往下滑時，瀏覽器底部的工具欄會隨着頁面一起晃動（向下滾動時會拉起底部工具欄），造成了很不好的體驗。所以我們想在中間的main部分加一個獨立的滾動條。
2.1 方案一
在main上使用fixed定位，加上overflow-y屬性。
.main { position: fixed; top: 50px; bottom: 50px; overflow-y: scroll; }不過不推薦這個fixed方案，因為頁面偶爾卡住不動，下面說到了這個問題。
2.2 方案二
中間的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; }
原文地址：https://www.cnblogs.com/xiahj/p/8036419.html