Posted on 2012-06-03 02:12
∪∩BUG 閱讀(368)
評論(0) 編輯 收藏
背景概述
Google已經(jīng)在Mobile Web App開發(fā)上取得了很大的突破. HTML5已經(jīng)拉近了Mobile設(shè)備Native App與Web App的差距. mobile Gmail 正是Google的Fixed position的最佳實(shí)踐之一. iPad上的基于兩欄的Gmail也運(yùn)用了這種實(shí)現(xiàn)機(jī)制.
桌面瀏覽器本身就支持 position: fixed. 但 mobile Safari在iOS5之前不支持, 我們只能定制一個模擬滾動的工具來替代原生的滾動.
本教程就是在Mobile Web App上如何實(shí)現(xiàn)position: fixed的,就以下幾點(diǎn)來講:
- 如何布局
- 通過transforms實(shí)現(xiàn)滾動的動畫效果
- 通過 transitions實(shí)現(xiàn)滾動的慣性沖力
- 觸摸屏幕時中止?jié)L動,即在打斷 transitions的執(zhí)行
跳轉(zhuǎn)看詳情
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/