体验优秀的触屏网页开发加速滑动与回弹

一个接近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的工作