体验优秀的触屏网页开发加速滑动与回弹
一个接近naturalapp体验的加速滑动与回弹css3属性
前几天，楼主发表了一篇关于手机网页开发软键盘与fixed博文叫做：webapp前端开发软键盘与position:fixed为我们带来的不便
自以为总结的挺好挺有范，但是很不幸，通过学习交流很快就有了更好更完美的方案，而且还是来自safari原生控件实现，代码很简单
overflow-y:auto;-webkit-overflow-scrolling:touch;
效率很高的有着硬件加速的系统级控件，简约而不简单
代码很少很简单，但我们可以替代掉之前为解决ios下软键盘与fixed问题而使用的webapp前端开发框架iscroll
iscroll框架带来的消耗且不论，它的确是解决了我们的问题，但是同时给我们带来了不少后遗症与代码处理上的麻烦
-webkit-overflow-scrolling来自safari原生控件的实现，工作原理是：在有这个属性的容器上，系统会创建了一个uiscrollview，应用于该元素并将之作为渲染对象，从而为我们实现体验流畅的触屏滑动
在ios上的表现结果令人十分满意，并且网页滑动和区域滑动的冲突同样解决的很好
接前文思路，位置被固定了的悬挂与滚动元素分离代码展现
<!doctype html> <html lang="zh-cn"> <head> <title>-webkit-overflow-scrolling</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <style> html,body{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;} body{position:relative;font-size:16px;} *{padding:0;margin:0;} header,footer,section{background:#eee;position:absolute;top:0;left:0;right:0;line-height:50px;text-align:center;} footer{top:auto;bottom:0;} section{padding:15px 0;overflow-y:auto;background:#fff;top:50px;bottom:50px;-webkit-overflow-scrolling:touch;} </style> </head> <body> <header>头部</header> <section>正文</section> <footer>底部</footer> </body> </html>
有人可能会问为什么html和body也要加，这两位是否有必要给这个属性
场景展示：
html和body都加
html和body都不加或只有一个加
前者比后者触发网页滑动的几率要小很多，自己试试吧
-webkit-overflow-scrolling的缺点
它当然也有自己缺点，既然创建了系统级控件就势必会有内存消耗，但是相比我们使用一套框架它的性价比不言而喻
在android下的表现也不令人满意，所以我们只是用它来替代之前为优化ios体验而准备的开发框架iscroll的工作
楼主对于-webkit-overflow-scrolling认知的时间还很短，博客内的观点未必足够全面，欢迎各位帮助补充完善
