Posted on 2012-06-03 02:12
∪∩BUG 閱讀(373)
評論(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/