關於在 iOS WebView 上取得即時捲動位置的實驗

TL;DR: 在慣性捲動的時候 JS 似乎會被暫停執行,所以沒辦法在中間做點什麼

今天在 Twitter 上看到 @medicalwei 的一篇推文,在問怎麼在 iOS 上處理捲動事件。點進去看,原來是他有一個專案是透過偵測捲動的位置、即時更新某一條 indicator。因為好像很有趣,我就也跳下去實驗看看。

首先是找一點跟 Touchevent 相關的資料。

iOS WebView 捲動網頁的事件流程

根據 Safari Web Content GuideOne-Finger Events 段落所描述,在 WebView 中用一隻手指做捲動的時候,整個流程應該如下圖:

Read on

使用 jQuery Deferred Object

jQuery 從 1.5 開始引進了 Deferred Object(延遲物件),可以更簡便地處理非同步程式在不同狀態的 callback。以往最常用到 callback 的就是 AJAX:當抓取資料結束的時候、失敗的時候、或是成功的時候,都會呼叫指定的 callback 函式來執行相對應的動作。現在 Deferred 物件可以讓其他需要卡很久的程式碼也丟出去非同步執行、再使用 jQuery 方便的 API 來處理 callback。

Deferred 物件的概念

一個 Deferred 物件有三種狀態:一開始是 pending(未解決)、另外有 resolved(已解決)跟 rejected(已拒絕)。從字面上應該很好理解,pending 就是還在等、resolved 就是順利成功了、rejected 則是失敗了。

想像一個叫「大F」的大牌藝人,每次通告都跑很久。如果有個節目放大F去出外景任務,可是要所有人等他不知道什麼時候回來,才能繼續錄影的話,那實在太痛苦了。所以幫大F準備了一個 Deferred 經紀人(叫「D姊」)。導演先跟D姊商量好,大F任務成功的時候、失敗的時候、新破關的時候要做些什麼事情,然後攝影棚內就可以繼續開拍了。中間可以跟D姊詢問大F任務完成了沒,其他跟大F相關的工作,就等到他外景出完了再說。

「大F」就是可能需要等很久的程式,所以我們可以把它包成函數丟出去做非同步執行、然後請 Deferred 物件(也就是「D姊」)幫忙管理 callback 的執行。

Read on

使用 CSS Radial Gradient 模擬彎曲陰影

彎曲陰影示意圖

其實我也不知道用中文到底怎麼稱呼這個東西,找了一下英文叫做 Curved Shadow。

這類的陰影其實也蠻常見了,上圖示範的是有點像紙張中間隆起造成的陰影、另外一種常見的是紙張中間凹陷、兩邊捲起造成的陰影。最直覺上就是在 Photoshop 裡面先做好再轉成圖片出來,不過我一直都很懶得做圖片──另一方面,圖片也蠻不彈性的。

Read on

CSS3 Columns: 消失的項目符號

之前在做 CoverTunes (如上圖,註1) 的時候,為了實作 iTunes 11 新的 Expanded View 會隨著視窗寬度把專輯裡面的曲目清單分配為多個欄位的這個特點 ,所以我用了編號清單 <ol> 搭配 CSS coluun 下去做:

Read on