賽拉維的秋天

最近在研究在Mobile Safari上實作類似iOS開發元件中的UITableView方法，
由於網路上已經有些既存的framework來解決這個需求，
所以為了在花最少effort下達到這個需求，
柯南開始進行一些研究的工夫。
目前總共研究了兩個framework，
一個是本家YUI3的ScrollView widget，
另一個則是iScroll。

嚴格來說，
我一開始是用YUI3來達成我想要的效果，
只要透過類似以下的Code就可以讓Web有上下捲動的效果。

YUI().use('scrollview-base', function(Y) {
    var scrollView = new Y.ScrollView({
        id:"scrollview",
        srcNode: '#scrollview-content',
        height: 310,
        flick: {
            minDistance:10,
            minVelocity:0.3,
            axis: "y"
        }
    });
     scrollView.render();
});

以上程式碼有興趣的朋友可以參考http://developer.yahoo.com/yui/3/scrollview/
就當一切都是那麼美好的時候，
因為柯南需要動態調整<li>的內容，
但是怎麼找文件，
就是沒找到重新計算scrollview的method，
所以當scrollview中的項目減少時，
就會出現我個人不能接受的靈異現象。
至此，
柯南只好重新看看網路上還有沒有其他的framework。
然後就發現了iScroll。
http://cubiq.org/iscroll-4

iScroll的用法跟YUI差不多，
都是由包含<ul>與<li>的DOM物件，
搭配JavaScript來實作ScrollView的效果，
不過iScroll還多了一個對我最重要的function可呼叫，
那就是

myScroll.refresh();

透過refresh函式可以讓整個ScrollView根據當下的<li>狀況，
重算捲動範圍。

總結來說，
這兩種framework都很容易上手，
YUI3對於動態改變DOM物件，
目前沒有提供函式重算捲動範圍。
不過透過YUI3實作出來的ScrollView，
即使在一般Browser也能運作。
iScroll有函式可以滿足單一頁面會動態改變<li>Dom物件的需求，
不過根據測試，
這些效果可能只有在Mobile上的Browser才起作用。

對ScrollView有興趣的開發者可以試試以上兩種framework，
當然若有其他更好的實作方式歡迎留言來分享喔。