背景概述

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