解决页面使用overflow: scroll在iOS上滑动卡顿的问题

如果你对某个div或模块使用了overflow: scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。大家不妨可以分别使用IOS和Android系统的手机浏览以下链接后滑动文字区域查看该效果(重点是记住iPhone浏览时的效果，方便浏览后文)：http://geek100.com/demo/os.html.

表示很奇怪会产生这样的差异，于是卸下行囊、放下面包、拿出电脑、插上网线、双击chrome、在输入栏中默默地敲上baidu.com...大百度(我更习惯性的称作为大败毒，因为它几乎构成了我学习、工作、生活的全部)。通过一个早上的爬虫搜索和与前端开发高手的技术探讨得知以下代码可解决这种卡顿的问题：

-webkit-overflow-scrolling: touch;

嗯，这次收拾好心情、重拾之前唾手可弃的信心(不是节操哦)、利用PP助手谨小慎微地把文件拖入iPhone手机中、小心翼翼地点开页面、手指轻轻在屏幕上滑动...哇哦，果然滑动流畅了诶。来吧！朋友!不妨拿出IPhone一起感受这激动的时刻。链接：http://geek100.com/demo/ost.html

据说是因为这行代码启用了硬件加速特性，所以滑动很流畅。但是这个属性也会相对耗费更多内存。在流畅的滑动效果和耗费内存之间，我选择了前者。

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

 

原理说了一大堆，我表示一句也没看明白。不过呢，作为知识的分享者就应该要时时刻刻以最简单明了的说法阐述问题，所以总结以下几点供大家参考：

1. 从SVN log看，在WebKit 108400版本左右才支持，所以iOS Safari应该是需要5.0。Android则是在4.0以上支持。
2. 从前端开发的角度讲，只需要知道CSS的属性-webkit-overflow-scrolling是真的创建了带有硬件加速的系统级控件，所以效率很高。
3. 从实际开发的角度讲，采用这样的做法相对是耗更多内存的，最好是在产生了非常大面积的overflow时才应用。

补充内容(待注意)：

上述所说的方法的确可以解决ios5.0、android4.0以后系统的滑动卡顿问题，不过呢在这还可以为大家推荐一些相关插件：iScroll(这里是iScroll插件的中文地址)、jRoll(中文名：酸萝卜) 。