iScroll5 API速查

時間  2019-12-18
標籤 iscroll5 iscroll api 速查 简体版
原文   原文鏈接

版本

針對iScroll的優化。爲了達到更高的性能，iScroll分爲了多個版本。你能夠選擇最適合你的版本。
目前咱們有如下版本：javascript

  • iscroll.js，這個版本是常規應用的腳本。它包含大多數經常使用的功能，有很高的性能和很小的體積。
  • iscroll-lite.js，精簡版本。它不支持快速跳躍，滾動條，鼠標滾輪，快捷鍵綁定。但若是你所須要的是滾動(特別是在移動平臺) iScroll 精簡版 是又小又快的解決方案。
  • iscroll-probe.js，探查當前滾動位置是一個要求很高的任務,這就是爲何我決定創建一個專門的版本。若是你須要知道滾動位置在任何給定的時間,這是iScroll給你的。（我正在作更多的測試,這可能最終在常規iscroll.js腳本，請留意）。
  • iscroll-zoom.js，在標準滾動功能上增長縮放功能。
  • iscroll-infinite.js，能夠作無限緩存的滾動。處理很長的列表的元素爲移動設備並不是易事。 iScroll infinite版本使用緩存機制,容許你滾動一個潛在的無限數量的元素。

入門

IScroll是一個類，每一個須要使用滾動功能的區域均要進行初始化。每一個頁面上的iScroll實例數目在設備的CPU和內存能承受的範圍內是沒有限制的。php

儘量保持DOM結構的簡潔。iScroll使用硬件合成層可是有一個限制硬件能夠處理的元素。
最佳的HTML結構以下：css

<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>

iScroll做用於滾動區域的外層。在上面的例子中，UL元素能進行滾動。只有容器元素的第一個子元素能進行滾動，其餘子元素徹底被忽略。html

最基本的腳本初始化的方式以下：java

<script type="text/javascript">
    var myScroll = new IScroll('#wrapper');
</script>

第一個參數能夠是滾動容器元素的DOM選擇器字符串，也能夠是滾動容器元素的引用對象。下面是一個有效的語法：git

var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);

因此基本上你要麼直接傳遞元素，要麼傳遞一個querySelector字符串。所以可使用css名稱代替ID去選擇一個滾動器容器,以下:web

var myScroll = new IScroll('.wrapper');

注意，iScroll使用的是querySelector 而不是 querySelectorAll，因此iScroll只會做用到選擇器選中元素的第一個。若是你須要對多個對象使用iScroll，你須要構建本身的循環機制。ajax

初始化

當DOM準備完成後iScroll須要被初始化。最保險的方式是在window的onload事件中啓動它。
在DOMContentLoaded事件中或者inline initialization中作也能夠，須要記住的是腳本須要知道滾動區域的高度和寬度。若是你有一些圖片在滾動區域致使不能立馬獲取區域的高度和寬度，iScroll的滾動尺寸有可能會錯誤。編程

爲滾動起容器增長position:relative或者absolute樣式。這將解決大多數滾動器容器大小計算不正確的問題。
綜上所述，最小的iScroll配置以下：api

<head>
    ...
    <script type="text/javascript" src="iscroll.js"></script>
    <script type="text/javascript">
    var myScroll;
    function loaded() {
        myScroll = new IScroll('#wrapper');
    }
    </script>
    </head>
    ...
    <body onload="loaded()">
    <div id="wrapper">
        <ul>
            <li>...</li>
            <li>...</li>
            ...
        </ul>
    </div>
    </body>

若是你有一個複雜的DOM結構，最好在onload事件以後適當的延遲，再去初始化iScroll。最好給瀏覽器100或者200毫秒的間隙再去初始化iScroll。

配置

在iScroll初始化階段能夠經過構造函數的第二個參數配置它。

var myScroll = new IScroll('#wrapper', {
    mouseWheel: true,
    scrollbars: true
});

上面的例子示例了在iScroll初始化時開啓鼠標滾輪支持和滾動條支持。

在初始化後你能夠經過options對象訪問標準化值。例如： js console.dir(myScroll.options);
上面的語句將返回myScroll實例的配置信息。所謂的標準化意味着若是你設置useTransform:true，可是瀏覽器並不支持CSS
transforms，那麼useTransform屬性值將爲false。

理解核心

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）。你能夠嘗試這配置他們，可是要當心內存泄漏。

基本功能

options.bounce

當滾動器到達容器邊界時他將執行一個小反彈動畫。在老的或者性能低的設備上禁用反彈對實現平滑的滾動有幫助。
默認值：true

options.click

爲了重寫原生滾動條，iScroll禁止了一些默認的瀏覽器行爲，好比鼠標的點擊。若是你想你的應用程序響應click事件，那麼該設置次屬性爲true。請注意，建議使用自定義的tap 事件來代替它（見下面）。
默認屬性：false

options.disableMouse

options.disablePointer

options.disableTouch

默認狀況下，iScroll監聽全部的指針事件，而且對這些事件中第一個被觸發的作出反應。這看上去是浪費資源，可是在大量的瀏覽器/設備上兼容，特定的事件偵測證實是無效的，因此listen-to-all是一個安全的作法。

若是你有一種設備偵測的內部機制，或者你知道你的腳本將在什麼地方運行，你能夠把你不須要的事件禁用（鼠標，指針或者觸摸事件）。
下面的例子是禁用鼠標和指針事件：

var myScroll = new IScroll('#wrapper', {
    disableMouse: true,
    disablePointer: true
});

默認值：false

options.eventPassthrough

有些時候你想保留原生縱向的滾動條但想爲橫向滾動條增長iScroll功能（好比走馬燈）。設置這個屬性爲true而且iScroll區域只將影響橫向滾動，縱向滾動將滾動整個頁面。

在移動設備上訪問event passthrough demo。注意，這個值也能夠設置爲horizontal，其做用和上面介紹的相反（橫向滾動條保持原生，縱向滾動條使用iScroll）。

options.freeScroll

此屬性針對於兩個兩個緯度的滾動條（當你須要橫向和縱向滾動條）。一般狀況下你開始滾動一個方向上的滾動條，另一個方向上會被鎖定不動。有些時候，你須要無約束的移動（橫向和縱向能夠同時響應），在這樣的狀況下此屬性須要設置爲true。請參考 2D scroll demo。
默認值：false

options.keyBindings

此屬性爲true時激活鍵盤（和遠程控制）綁定。請參考下面的Key bindings內容。
默認值：false

options.invertWheelDirection

當鼠標滾輪支持激活後，在有些狀況下須要反轉滾動的方向。（好比，鼠標滾輪向下滾動條向上，反之亦然）。
默認值：false

options.momentum

在用戶快速觸摸屏幕時，你能夠開/關勢能動畫。關閉此功能將大幅度提高性能。
默認值：true

options.mouseWheel

偵聽鼠標滾輪事件。
默認值：false

options.preventDefault

當事件觸發時師傅執行preventDefault()。此屬性應該設置爲true，除非你真的知道你須要怎麼作。
請參考下面的Advanced features中的preventDefaultException，能夠獲取更多控制preventDefault行爲的信息。
默認值：true

options.scrollbars

是否顯示爲默認的滾動條。更多信息請查看Scrollbar
默認值：false

options.scrollX

options.scrollY

默認狀況下只有縱向滾動條可使用。若是你須要使用橫向滾動條，須要將scrollX 屬性值設置爲 true。請參考示例horizontal demo。

也能夠參考freeScroll選項。

默認值：scrollX: false，scrollY: true

注意屬性 scrollX/Y: true 與overflow: auto有相同的效果。設置一個方向上的值爲 false 能夠節省一些檢測的時間和CPU的計算週期。

options.startX

options.startY

默認狀況下iScroll從0, 0 (top left)位置開始，經過此屬性可讓滾動條從不一樣的位置開始滾動。
默認值：0

options.tap

設置此屬性爲true，當滾動區域被點擊或者觸摸但並無滾動時，可讓iScroll拋出一個自定義的tap事件。
這是處理與能夠點擊元素之間的用戶交互的建議方式。偵聽tap事件和偵聽標準事件的方式一致。示例以下：

element.addEventListener('tap', doSomething, false); \\ Native
$('#element').on('tap', doSomething); \\ jQuery

你能夠經過傳遞一個字符串來自定義事件名稱。好比：

tap: 'myCustomTapEvent'

在這個示例裏你應該偵聽名爲myCustomTapEvent的事件。
默認值：false

滾動條

滾動條不僅是像名字所表達的意義同樣，在內部它們是做爲indicators的引用。

一個指示器偵聽滾動條的位置而且現實它在全局中的位置，可是它能夠作更多的事情。
先從最基本的開始。

options.scrollbars

正如咱們在基本功能介紹中提到的，激活滾動條只須要作一件事情，這件事情就是：

var myScroll = new IScroll('#wrapper', {
    scrollbars: true
});

固然這個默認的行爲是能夠定製的。

options.fadeScrollbars

不想使用滾動條淡入淡出方式時，須要設置此屬性爲false以便節省資源。
默認值：false

options.interactiveScrollbars

此屬性可讓滾動條能拖動，用戶能夠與之交互。
默認值：false

options.resizeScrollbars

滾動條尺寸改變基於容器和滾動區域的寬/高之間的比例。此屬性設置爲false讓滾動條固定大小。這可能有助於自定義滾動條樣式（參考下面的滾動條樣式）。
默認值：true

options.shrinkScrollbars

當在滾動區域外面滾動時滾動條是否能夠收縮到較小的尺寸。
有效的值爲：clip 和 scale。
clip是移動指示器到它容器的外面，效果就是滾動條收縮起來，簡單的移動到屏幕之外的區域。屬性設置爲此值後將大大的提高整個iScroll的性能。
scale是關閉屬性useTransition，以後全部的動畫效果將使用requestAnimationFrame實現。指示器實際上有各類尺寸，而且最終的效果最好。
默認值：false

注意改變大小不是在GPU上執行的，因此'scale' 是在CPU上執行。

請參考 滾動條示例。

滾動條樣式

若是你不喜歡默認的滾動條樣式，並且你認爲你能夠作的更好，你能夠自定義滾動條樣式。第一步就是設置選項scrollbars的值爲custom：

var myScroll = new IScroll('#wrapper', {
    scrollbars: 'custom'
});

使用下面的CSS類能夠簡單的改變滾動條樣式。

  • .iScrollHorizontalScrollbar，這個樣式應用到橫向滾動條的容器。這個元素實際上承載了滾動條指示器。
  • .iScrollVerticalScrollbar，和上面的樣式相似，只不過適用於縱向滾動條容器。
  • .iScrollIndicator，真正的滾動條指示器。
  • .iScrollBothScrollbars，這個樣式將在雙向滾動條顯示的狀況下被加載到容器元素上。一般狀況下其中一個（橫向或者縱向）是可見的

自定義滾動條樣式示例。

若是你設置resizeScrollbars: false，滾動條將是固定大小，不然它將基於滾動區域的尺寸變化。

指示

上面全部關於滾動條的選項其實是包裝了一個底層的選項indicators。它看起來或多或少像這樣：

var myScroll = new IScroll('#wrapper', {
    indicators: {
        el: [element|element selector]
        fade: false,
        ignoreBoundaries: false,
        interactive: false,
        listenX: true,
        listenY: true,
        resize: true,
        shrink: false,
        speedRatioX: 0,
        speedRatioY: 0,
    }
});

options.indicators.el

這是一個強制性的參數，它保留了指向滾動條容器元素的引用。容器裏的第一個子元素就是指示器。
有效的語法以下：

indicators: {
    el: document.getElementById('indicator')
}

更簡單的方式：

indicators: {
    el: '#indicator'
}

注意，滾動條能夠在你的文檔的任意地方，它不須要在滾動條包裝器內。

options.indicators.ignoreBoundaries

這個屬性是告訴指示器忽略它容器所帶來的邊界。當咱們能改變滾動條速度的比率，在讓滾動條滾動時這個屬性頗有用。好比你想讓指示器是滾動條速度的兩倍，指示器將很快到達它的結尾。這個屬性被用在視差滾動。
默認值：false

options.indicators.listenX

options.indicators.listenY

指示器的那一個軸（橫向和縱向）被偵聽。能夠設置一個或者都設置
默認值：true

options.indicators.speedRatioX

options.indicators.speedRatioY

指示器移動的速度和主要滾動條大小的關係。默認狀況下是設置爲自動。你不多須要去改變這個值。
默認值：0

options.indicators.fade

options.indicators.interactive

options.indicators.resize

options.indicators.shrink

這幾個選項和咱們已經介紹過的滾動條中的同樣，在這裏不重複介紹。
請參考迷你地圖示例，你將體驗indicators選項的神奇力量。

你應該已經注意到選項indicators是複數，是的，實際上，傳遞一個對象數組你能夠獲得一個虛擬的無限大小的指示器。我不知道你是否須要，可是，這裏我是想你介紹參數設置，因此要說起此。

視差滾動

視差滾動是指示器功能的一個 附屬功能
指示器是一個遵循主滾動條移動和動畫的層。若是你瞭解它你就會理解這個功能背後的力量。增長這個功能你就能夠建立任意數量的指示器和視差滾動。
請參考 視差滾動示例.

滾動的編程接口

固然還能夠經過編程來進行滾動。

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方法裏的同樣。

對齊

iScroll能對齊到固定的位置和元素。

options.snap

最簡單的對齊配置以下：

var myScroll = new IScroll('#wrapper', {
    snap: true
});

這將按照頁面容器的大小自動分割滾動條。
snap屬性也能夠傳遞字符類型類型的值。這個值是滾動條將要對齊到的元素的選擇器。好比下面：

var myScroll = new IScroll('#wrapper', {
    snap: 'li'
});

這個示例中滾動條將會對齊到每個LI標記的元素。
下面將幫助你快速瀏覽iScroll提供的關於對齊的一系列有趣的方法。

goToPage(x, y, time, easing)

x 和 y呈現你想滾動到橫向軸或者縱向軸的頁面數。若是你須要在單個惟獨上使用滾動條，只須要爲你不須要的軸向傳遞0值。
time屬性是動畫週期，easing屬性是滾動到指定點使用的擦除功能類型。請參考高級功能中的option.bounceEasing。這兩個屬性都是可選項。

myScroll.goToPage(10, 0, 1000);

上面這個例子將在一秒內沿着橫向滾動到第10頁。

next()

prev()

滾動到當前位置的下一頁或者前一頁。

縮放

爲了使用縮放功能，你最好使用iscroll-zoom.js腳本。

options.zoom

此屬性設置爲true啓用縮放功能。
默認值：false

options.zoomMax

最大縮放級數。
默認值：4

options.zoomMin

最小縮放級數。
默認值：1

options.zoomStart

初始的縮放級數。
默認值：1

options.wheelAction

鼠標滾輪的動做能夠設置爲zoom，這樣在滾動滾輪時縮放操做會代替原來的滾動操做。
默認值：undefined（即：鼠標滾輪滾動）

和前面的示例同樣，一個好的縮放功能的配置以下：

myScroll = new IScroll('#wrapper', {
    zoom: true,
    mouseWheel: true,
    wheelAction: 'zoom'
});

縮放功能使用的CSS的轉換功能。iScroll只能在支持此CSS功能的瀏覽器上執行。

一些瀏覽器（特別是基於webkit的）採起的快照縮放區域就放在硬件合成層(好比當你申請轉換)。該快照做爲紋理的縮放區域,它幾乎不能被更新。這意味着您的紋理將基於
scale 1 進行縮放,將致使文本和圖像模糊,清晰度低。

一個簡單的解決方案是使用實際分辨率雙倍（或者三倍）裝載內容，而後
放到一個按照scale(0.5)比例縮小的div中。這種方法大多數狀況下能適用。

請參考 縮放示例。

zoom(scale, x, y, time)

一個有意思的的方法，能讓你進行縮放編程。
scale是縮放因子。
x 和 y是縮放關注點，即縮放的中心。若是沒有指定，這個中心就是屏幕中心。
time是毫秒級別的動畫週期（可選項）。

無限滾動

iScroll集成智能緩存系統，容許處理的使用(重用)一羣元素幾乎無限數量的數據。
無限滾動開發的早期階段，儘管它能夠被認爲是穩定的，但它尚未準備好被普遍使用。
請參考 無限滾動示例 並請提交你的建議和報告bug。

高級選項

下面這些選項主要針對核心開發人員。

options.bindToWrapper

move事件一般綁定到文檔而不是滾動器容器（wrapper）。當你在滾動器容器（wrapper）外移動光標/手指，滾動條將不斷滾動。這一般是你想要的,可是你也能夠綁定事件轉移到滾動器容器（wrapper）自己。這樣作一旦指針離開了容器，滾動就會中止。
默認值：false

options.bounceEasing

擦除功能在彈跳動畫過程當中執行。有效的值爲：'quadratic', 'circular', 'back', 'bounce', 'elastic'. 參見bounce easing demo，往下拽滾動條而後釋放。
bounceEasing比上面的示例更強大。你能夠自定義一個消除的方式，好比：

bounceEasing: {
    style: 'cubic-bezier(0,0,1,1)',
    fn: function (k) { return k; }
}

上面這個示例將執行一個線性的擦出。style選項將在在每次動畫執行時使用CSS轉場執行。fn和requestAnimationFrame一塊兒使用。若是一個擦出功能太複雜，不能由一個三次貝塞爾曲線展示，那麼爲style屬性傳遞 '' （空字符串）。
默認值：circular

注意：bounce 和 elastic這兩種方式不能被CSS轉場執行。

options.bounceTime

彈跳動畫的持續時間，使用毫秒級。
默認值：600

options.deceleration

這個值能夠改變改變更畫的勢頭持續時間/速度。更高的數字使動畫更短。你能夠從0.01開始去體驗，這個值和基本的值比較，基本上沒有動能。
默認值：0.0006

options.mouseWheelSpeed

設置鼠標滾輪滾動的速度值。
默認值：20

options.preventDefaultException

調用preventDefault()方法時全部的異常將被觸發，儘管preventDefault設置了值。
這是一個強大的選項，若是你想爲全部包含formfield樣式名稱的元素上應用preventDefault()方法，你能夠設置爲下面的值：

preventDefaultException: { className: /(^|\s)formfield(\s|$)/ }

默認值：{ tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }.

options.resizePolling

當你改變窗口的大小iScroll從新計算元素的位置和尺寸。這多是一個至關艱鉅的任務。輪詢設置爲60毫秒。
經過下降這個值你得到更好的視覺效果，但會佔用更多的CPU資源。默認值是一個很好的折中。
默認值：60

刷新

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上進行。一般給渲染器一些執行的時間。

自定義事件

Custom events

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，縮放結束。

onScroll事件

scroll事件在iScroll probe edition版本中有效（僅包含在iscroll-probe.js腳本文件中）。能夠經過改變probeType選項值來改變scroll事件的觸發時機。

options.probeType

這個屬性是調節在scroll事件觸發中探針的活躍度或者頻率。有效值有：1, 2, 3。數值越高表示更活躍的探測。探針活躍度越高對CPU的影響就越大。

  • probeType: 1 對性能沒有影響。scroll事件只有在滾動條不繁忙的時候觸發。
  • probeType: 2 除了在勢能和反彈範圍內，將在scroll事件週期內一直執行。這相似於原生的onScroll事件。
  • probeType: 3 像素級的觸發scroll事件。注意，此時滾動只關注requestAnimationFrame (即：useTransition:false).

請參考 probe demo.

按鍵綁定

你能夠激活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;

原文連接:http://iiunknown.gitbooks.io/iscroll-5-api-cn/content/

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程