您的浏览器不支持JavaScript或者JavaScript的运行被您禁止了。

-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元素短暂错位(滑动结束后会复位)的现象,所以改完样式后记得在真机上测一下。

参考:

  • https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling
ES6中的Destructuring assignment解构赋值
HelloWord 2017-07-04 14:39 神奇浏览器
-webkit-overflow-scrolling: touch元素滚动时可能会出现position: fixed元素短暂错位 请问有解决方案吗?
Yakima Teng 2017-11-13 10:12 神奇浏览器
感觉并没有什么好办法,我已经弃掉这个方案了,尽量少嵌套scroll元素
Yakima Teng 2017-11-13 10:21 神奇浏览器
这个是适用于没有跟position: fixed元素同时出现的场景