一个接近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认知的时间还很短，博客内的观点未必足够全面，欢迎各位帮助补充完善
时间： 2024-10-12 15:23:06