天天看點

iscroll視差滾動視差滾動

視差滾動

視差滾動是訓示器功能的一個 附屬功能

訓示器是一個遵循主滾動條移動和動畫的層。如果你了解它你就會了解這個功能背後的力量。增加這個功能你就可以建立任意數量的訓示器和視差滾動。

請參考 視差滾動示例.

滾動的程式設計接口

當然還可以通過程式設計來進行滾動。

scrollTo(x, y, time, easing)
           

對應存在的一個叫做myScroll的iScroll執行個體,可以通過下面的方式滾動到任意的位置:

myScroll.scrollTo(0, -100);
           

通過上面的方式将向下滾動100個像素。記住:0永遠是左上角。需要滾動你必須傳遞負數。

time 和 easing是可選項。他們控制滾動周期(毫秒級别)和動畫的擦除效果。

擦除功能是一個有效的IScroll.utils.ease對象。例如應用一個一秒的經典擦除動畫你應該這麼做:

myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);
           

擦除動畫的類型選項有:quadratic, circular, back, bounce, elastic。

scrollBy(x, y, time, easing)

和上面一個方法類似,但是可以傳遞X和Y的值從目前位置進行滾動。

myScroll.scrollBy(0, -10);
           

上面這個語句将在目前位置向下滾動10個像素。如果你目前所在位置為-100,那麼滾動結束後位置為-110.

scrollToElement(el, time, offsetX, offsetY, easing)

這是一個很有用的方法,你會喜歡它的。

在這個方法中隻有一個強制的參數就是el。傳遞一個元素或者一個選擇器,iScroll将嘗試滾動到這個元素的左上角位置。

time是可選項,用于設定動畫周期。

offsetX 和 offsetY定義像素級的偏移量,是以你可以滾動到元素并且加上特别的偏移量。但并不僅限于此。如果把這兩個參數設定為true,元素将會位于螢幕的中間。請參考例子 滾動到元素 example。

easing參數和scrollTo方法裡的一樣。