申请网站
忘记密码
密 码：
登录名：
建站咨询热线：
0532-88781131
、
15166683288
返回贴子列表
发表新贴
主题：
体会优秀的触屏网页开发加速滑动与回弹
共有
2289
人浏览过本贴
主贴管理
置 顶
加 精
结 贴
转 贴
昵称：奈薇建站网
论坛积分：108060
发贴等级：
21
发贴数：1159
回贴数：1282
被砸鸡蛋：
1
获赠鲜花：
182
发表时间：2015/1/8 8:46:00
楼 主
体会优秀的触屏网页开发加速滑动与回弹
体验优秀的触屏网页开发加速滑动与回弹
一个接近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上的表现结果令人十分满意，并且网页滑动和区域滑动的冲突同样解决的很好
接前文思路，位置被固定了的悬挂与滚动元素分离代码展现
有人可能会问为什么html和body也要加，这两位是否有必要给这个属性
场景展示：
html和body都加
html和body都不加或只有一个加
前者比后者触发网页滑动的几率要小很多，自己试试吧
-webkit-overflow-scrolling的缺点
它当然也有自己缺点，既然创建了系统级控件就势必会有内存消耗，但是相比我们使用一套框架它的性价比不言而喻
在Android下的表现也不令人满意，所以我们只是用它来替代之前为优化Ios体验而准备的开发框架iscroll的工作
楼主对于-webkit-overflow-scrolling认知的时间还很短，博客内的观点未必足够全面，欢迎各位帮助补充完善
奈薇建站网致力于，让每个中国人、每个中国企业都拥有自己的“官方网站”！
回复此贴
单贴管理
修 改
删 除
清理签名
TOP
共
0
个回贴 分
0
页
上一页 / 下一页 当前第
页
奈薇建站网青岛网站建设公司/青岛网站制作公司，专业提供"气质"型网站建设及精美网站制作服务，同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展
热点地区：
青岛网站建设价格
青岛即墨网站制作公司
开发区信息港
山东在线门户
1
182
