外观
Skip to content
-webkit-overflow-scrolling让iOS下页面滚动如丝般顺滑
现象描述：给html元素设定了overflow: auto;后，当元素内部内容较多时会出现滚动条，这个滚动条在安卓机里滚动很正常，但是在iOS机里就显得很不丝滑了，滑哪停哪（iOS软件内嵌页面和iOS微信客户端内都存在这个现象）。经测试，在该html元素对应样式的overflow: auto;的下面加一句-webkit-overflow-scrolling: touch;即可解决问题。
在Safari CSS Reference页面里有对这个css属性进行介绍：
描述：指定是否对设定样式 overflow:scroll 的元素使用类似IOS原生的滚动条滚动效果。 可选值：
- auto：单手滚动（不带动量）；
- touch：类似原生的滚动效果（自带一堆效果，如透明、遮罩、transform转变）；
- 默认值为auto。
可用性：适用于iOS 5.0及之后的版本。
说明：
经实测，-webkit-overflow-scrolling: touch;这个样式除了像文档中说的那样对 overflow:scroll 的元素有效外，对 overflow:auto的元素也是有效的。 另外需要注意的是，如果你的页面上有position; fixed定位的元素的话，-webkit-overflow-scrolling: touch元素滚动时可能会出现position: fixed元素短暂错位（滑动结束后会复位）的现象，所以改完样式后记得在真机上测一下。