首页 > 代码库 > 体验优秀的触屏网页开发加速滑动与回弹
体验优秀的触屏网页开发加速滑动与回弹
一个接近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认知的时间还很短，博客内的观点未必足够全面，欢迎各位帮助补充完善
体验优秀的触屏网页开发加速滑动与回弹
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。