摘要:最好給瀏覽器或者毫秒的間隙再去初始化。他們控制滾動周期毫秒級別和動畫的擦除效果。重新繪制階段不是瞬時發生的只是范圍結束時觸發。注如果你有一個相當復雜的結構,你應該給瀏覽器更多的執行事件,可以設置到毫秒的超時時間。使用方法注冊事件。
入門
Scroll是一個類,每個需要使用滾動功能的區域均要進行初始化。每個頁面上的iScroll實例數目在設備的CPU和內存能承受的范圍內是沒有限制的。
盡可能保持DOM結構的簡潔。iScroll使用硬件合成層但是有一個限制硬件可以處理的元素。
最佳的HTML結構如下:
- ...
- ...
...
iScroll作用于滾動區域的外層。在上面的例子中,UL元素能進行滾動。只有容器元素的第一個子元素能進行滾動,其他子元素完全被忽略。
最基本的腳本初始化的方式如下:
第一個參數可以是滾動容器元素的DOM選擇器字符串,也可以是滾動容器元素的引用對象。下面是一個有效的語法:
var wrapper = document.getElementById("wrapper"); var myScroll = new IScroll(wrapper);
所以基本上你要么直接傳遞元素,要么傳遞一個querySelector字符串。因此可以使用css名稱代替ID去選擇一個滾動器容器,如下:
var myScroll = new IScroll(".wrapper");
注意,iScroll使用的是querySelector 而不是 querySelectorAll,所以iScroll只會作用到選擇器選中元素的第一個。如果你需要對多個對象使用iScroll,你需要構建自己的循環機制。
初始化當DOM準備完成后iScroll需要被初始化。最保險的方式是在window的onload事件中啟動它。
在DOMContentLoaded事件中或者inline initialization中做也可以,需要記住的是腳本需要知道滾動區域的高度和寬度。如果你有一些圖片在滾動區域導致不能立馬獲取區域的高度和寬度,iScroll的滾動尺寸有可能會錯誤。
為滾動起容器增加position:relative或者absolute樣式。這將解決大多數滾動器容器大小計算不正確的問題。
綜上所述,最小的iScroll配置如下:
... ...
- ...
- ...
...
注:如果你有一個復雜的DOM結構,最好在onload事件之后適當的延遲,再去初始化iScroll。最好給瀏覽器100或者200毫秒的間隙再去初始化iScroll。
參數配置在iScroll初始化階段可以通過構造函數的第二個參數配置它。
var myScroll = new IScroll("#wrapper", { mouseWheel: true, scrollbars: true });
上面的例子示例了在iScroll初始化時開啟鼠標滾輪支持和滾動條支持。
理解核心iScroll使用基于設備和瀏覽器性能的各種技術來進行滾動。通常不需要你來配置引擎,iScroll會為你選擇最佳的方式。
盡管如此,理解iScroll工作機制和了解如何去配置他們也是很重要的。
options.useTransform
默認情況下引擎會使用CSStransform屬性。如果現在還是2007年,那么可以設置這個屬性為false,這就是說:引擎將使用top/left屬性來進行滾動。
這個屬性在滾動器感知到Flash,iframe或者視頻插件內容時會有用,但是需要注意:性能會有極大的損耗。
默認值:true
options.useTransition
iScroll使用CSS transition來實現動畫效果(動量和彈力)。如果設置為false,那么將使用requestAnimationFrame代替。
在現在瀏覽器中這兩者之間的差異并不明顯。在老的設備上transitions執行得更好。默認值:true
options.HWCompositing
這個選項嘗試使用translateZ(0)來把滾動器附加到硬件層,以此來改變CSS屬性。在移動設備上這將提高性能,但在有些情況下,你可能想要禁用它(特別是如果你有太多的元素和硬件性能跟不上)。
默認值:true
注:如果不確定iScroll的最優配置。從性能角度出發,上面的所有選項應該設置為true。(或者更好的方式,讓他們自動設置屬性為true)。你可以嘗試這配置他們,但是要小心內存泄漏。
滾動條滾動條不只是像名字所表達的意義一樣,在內部它們是作為indicators的引用。
一個指示器偵聽滾動條的位置并且現實它在全局中的位置,但是它可以做更多的事情。
先從最基本的開始。
options.scrollbars
正如我們在基本功能介紹中提到的,激活滾動條只需要做一件事情,這件事情就是:
var myScroll = new IScroll("#wrapper", { scrollbars: true });
當然這個默認的行為是可以定制的。
滾動的編程接口當然還可以通過編程來進行滾動。
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,元素將會位于屏幕的中間。
easing參數和scrollTo方法里的一樣。
iScroll能對齊到固定的位置和元素。
options.snap
最簡單的對齊配置如下:
var myScroll = new IScroll("#wrapper", { snap: true });
這將按照頁面容器的大小自動分割滾動條。
snap屬性也可以傳遞字符類型類型的值。這個值是滾動條將要對齊到的元素的選擇器。比如下面:
var myScroll = new IScroll("#wrapper", { snap: "li" });
這個示例中滾動條將會對齊到每一個LI標記的元素。
下面將幫助你快速瀏覽iScroll提供的關于對齊的一系列有趣的方法。
x 和 y呈現你想滾動到橫向軸或者縱向軸的頁面數。如果你需要在單個唯獨上使用滾動條,只需要為你不需要的軸向傳遞0值。
time屬性是動畫周期,easing屬性是滾動到指定點使用的擦除功能類型。請參考高級功能中的option.bounceEasing。這兩個屬性都是可選項。
myScroll.goToPage(10, 0, 1000);
上面這個例子將在一秒內沿著橫向滾動到第10頁。
next()
prev()
滾動到當前位置的下一頁或者前一頁。
縮放為了使用縮放功能,你最好使用iscroll-zoom.js腳本。
和前面的示例一樣,一個好的縮放功能的配置如下:
myScroll = new IScroll("#wrapper", { zoom: true, mouseWheel: true, wheelAction: "zoom" });刷新
iScroll需要知道包裝器和滾動器確切的尺寸,在iScroll初始化的時候進行計算,如果元素大小發生了變化,需要告訴iScroll DOM發生了變化。
下面將提供調用refresh方法的正確時機。
每次觸摸DOM,瀏覽器渲染器重繪頁面。一旦發生了重畫我們可以安全地讀新的DOM屬性。重新繪制階段不是瞬時發生的只是范圍結束時觸發。這就是為什么我們需要給渲染器刷新iScroll之前一點時間。
為了確保javascript得到更新后的屬性,應該像下面的例子這樣使用刷新方法:
ajax("page.php", onCompletion); function onCompletion () { // Update here your DOM setTimeout(function () { myScroll.refresh(); }, 0); };
這里調用refresh()使用了零秒等待,如果你需要立即刷新iScroll邊界就是如此使用。當然還有其他方法可以等待頁面重繪,但零超時方式相當穩定。
注:*如果你有一個相當復雜的HTML結構,你應該給瀏覽器更多的執行事件,可以設置100到200毫秒的超時時間。
這通常適用于所有任務必須在DOM上進行。通常給渲染器一些執行的時間。*
iScroll還提供額一些你可以掛靠的有用的自定義事件。
使用on(type, fn)方法注冊事件。
myScroll = new IScroll("#wrapper"); myScroll.on("scrollEnd", doSomething);
上面的代碼會在每次滾動停止是執行doSomething方法。
可以掛靠的事件如下:
beforeScrollStart,在用戶觸摸屏幕但還沒有開始滾動時觸發。
scrollCancel,滾動初始化完成,但沒有執行。
scrollStart,開始滾動
scroll,內容滾動時觸發,只有在scroll-probe.js版本中有效,請參考onScroll event。
scrollEnd,停止滾動時觸發。
flick,用戶打開左/右。
zoomStart,開始縮放。
zoomEnd,縮放結束。
你可以激活keyBindings選項來支持鍵盤控制。默認情況下iScroll監聽方向鍵,上下翻頁建,home/end鍵,但這些按鍵綁定完全可以自定義。
你可以通過傳遞一個包含按鍵代碼列表的對象來進行按鍵綁定。
默認的按鍵值如下:
keyBindings: { pageUp: 33, pageDown: 34, end: 35, home: 36, left: 37, up: 38, right: 39, down: 40 }
當然你也可以傳遞字符串進行按鍵綁定(例如:pageUp: "a")。只要你設置了對于的按鍵值,那么iScroll就會響應你的設置。
滾動條信息iScroll存儲了很多有用的信息,您可以使用它們來增強您的應用。
你可能會發現有用的:
myScroll.x/y,當前位置
myScroll.directionX/Y,最后的方向 (-1 down/right, 0 still, 1 up/left)
myScroll.currentPage,當前對齊捕獲點
下面是關于處理時間的代碼示例:
myScroll = new IScroll("#wrapper"); myScroll.on("scrollEnd", function () { if ( this.x < -1000 ) { // do something } });
如果 x 位置是低于-1000 像素滾輪停止時,上述執行某些代碼。請注意我用這個產品而不是 myScroll,您可以使用兩個當然,但 iScroll 傳遞本身作為這種情況下,當觸發自定義事件的功能。
銷毀在不需要使用iScoll的時候調用iScroll實例的公共方法destroy()可以釋放一些內存。
myScroll.destroy(); myScroll = null;
參考:
https://github.com/cubiq/iscroll
http://iiunknown.gitbooks.io/...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85886.html
摘要:另外我的這段代碼可謂神來之筆,大家好好看看這一步很重要,否則圖片不能完成緩沖效果原理在正在加載完后,就設置為可以緩沖。加載圖片使用的效果淡入在離可視區以內的圖片也開始加載了,提升體驗度取消等默認不可點擊效果解決。 以前在做項目的時候,把jquery.lazyload.js和iscroll.js一起使用,當滑動頁面的時候,iscroll的滑動效果出來了,但是圖片懶加載的效果沒出來,主要是...
摘要:是一個移動端的上拉下拉加載更多的組件。因為在節點元素創建之前,必須先設定高度,否則會導致無法滾動創建完畢是指定給第一個子元素滾動,所以的上拉和下拉刷新也是追加到第一個子元素里面,其實把第一個子元素想象成為里面的就可以了。 listloading.js listloading是一個移動端的上拉、下拉加載更多的組件。主要依賴于iscroll.js v5.1.2基礎上開發的組件,基礎庫可以使...
摘要:今天要說的就是用實現局部滾動出現頁面布局的問題。問題頁面底部多出一部分或是頁面顯示不全,拉動回彈后內容又顯示不全。原因數據異步加載,無法正確獲取頁面元素的真實高度。自定義方法請求成功切換頁面后刷新解決異步加載數據布局出錯或 相信對于前端攻城獅來說Iscroll.js,大家并不陌生,lite版本只有24kb。但可以解決 1、position:fixed在IOS端的兼容性問題 >移動端vi...
摘要:今天要說的就是用實現局部滾動出現頁面布局的問題。問題頁面底部多出一部分或是頁面顯示不全,拉動回彈后內容又顯示不全。原因數據異步加載,無法正確獲取頁面元素的真實高度。自定義方法請求成功切換頁面后刷新解決異步加載數據布局出錯或 相信對于前端攻城獅來說Iscroll.js,大家并不陌生,lite版本只有24kb。但可以解決 1、position:fixed在IOS端的兼容性問題 >移動端vi...
閱讀 2648·2021-11-24 09:39
閱讀 1648·2021-11-24 09:38
閱讀 629·2021-11-22 14:44
閱讀 1888·2021-11-18 10:02
閱讀 2573·2021-11-18 10:02
閱讀 1158·2021-10-14 09:43
閱讀 4244·2021-09-29 09:35
閱讀 524·2021-07-30 15:30