在移动端上，在你用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