【工作技巧】解决页面使用overflow: scroll在iOS上滑动卡顿的问

最近的一次开发中，使用到了overflow：scroll 属性来滑动div。
如果你对某个div或模块使用了overflow: scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象。

以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling: touch;，是因为这行代码启用了硬件加速特性，所以滑动很流畅。

实际上，Safari真的用了原生控件来实现，对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。

在WebKit 108400版本左右才支持，所以iOS Safari应该是需要5.0。Android则是在4.0以上支持。
从前端开发的角度讲，只需要知道CSS的属性-webkit-overflow-scrolling是真的创建了带有硬件加速的系统级控件，所以效率很高。

上述所说的方法的确可以解决ios5.0、android4.0以后系统的滑动卡顿问题

作者：独享奢华
链接：
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!