立诚勿怠,格物致知
It's all about connecting the dots

-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
赞(4) 打赏
文章名称:《-webkit-overflow-scrolling让iOS下页面滚动如丝般顺滑》
文章链接:https://www.orzzone.com/webkit-overflow-scrolling.html
商业联系:yakima.public@gmail.com

本站大部分文章为原创或编译而来,对于本站版权文章,未经许可不得用于商业目的,非商业性转载请以链接形式标注原文出处。
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 3

  1. #1

    -webkit-overflow-scrolling: touch元素滚动时可能会出现position: fixed元素短暂错位
    请问有解决方案吗?

    HelloWord7年前 (2017-07-04)回复
    • 感觉并没有什么好办法,我已经弃掉这个方案了,尽量少嵌套scroll元素

      Yakima Teng6年前 (2017-11-13)回复
    • 这个是适用于没有跟position: fixed元素同时出现的场景

      Yakima Teng6年前 (2017-11-13)回复

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力提供更多优质内容!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册