i,unbug

Undeniable[Better:见贤思齐,闻庸自省. Unique:独立思索,志在远方. Genuine:谦逊真诚,宽以待人.]

[译]手把手教你编写iOS上Mobile Web App实现Fixed Position和模拟滚动

Posted by on Jun 3, 2012 in Mobile Web App | 5 comments

背景概述

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的执行
Read More