Posted on 2012-06-03 02:12
∪∩BUG 阅读(341)
评论(0) 编辑 收藏
背景概述
Google已经在Mobile Web App开发上取得了很大的突破. HTML5已经拉近了Mobile设备Native App与Web App的差距. mobile Gmail 正是Google的Fixed position的最佳实践之一. iPad上的基于两栏的Gmail也运用了这种实现机制.
桌面浏览器本身就支持 position: fixed. 但 mobile Safari在iOS5之前不支持, 我们只能定制一个模拟滚动的工具来替代原生的滚动.
本教程就是在Mobile Web App上如何实现position: fixed的,就以下几点来讲:
- 如何布局
- 通过transforms实现滚动的动画效果
- 通过 transitions实现滚动的惯性冲力
- 触摸屏幕时中止滚动,即在打断 transitions的执行
跳转看详情
http://www.iunbug.com/2012/06/03/%E7%BF%BB%E8%AF%91%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E7%BC%96%E5%86%99ios%E4%B8%8Amobile-web-app%E5%AE%9E%E7%8E%B0fixed-position%E5%92%8C%E6%A8%A1%E6%8B%9F%E6%BB%9A%E5%8A%A8/