JS進階篇--iscroll.js的使用

時間 2019-11-06

標籤進階 iscroll.js iscroll 使用欄目 JavaScript 简体版

原文原文鏈接

入門

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

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

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

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

最基本的腳本初始化的方式以下：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去選擇一個滾動器容器,以下:github

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初始化時開啓鼠標滾輪支持和滾動條支持。

理解核心

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提供的關於對齊的一系列有趣的方法。

goToPage(x, y, time, easing)

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/...

1. iscroll.js的使用
2. js進階篇【續】
3. JS之iscroll.js的使用詳解
4. JS進階篇--JS apply的巧妙用法以及擴展到Object.defineProperty的使用
5. iScroll.js使用詳解
6. iScroll.js的用法
7. iscroll.js的用法
8. Linux使用詳解(進階篇)
9. Nmap使用教程（進階篇）
10. Android 玩轉Glide4---進階使用篇
更多相關文章...
• TortoiseSVN 使用教程 - SVN 教程
• Docker 容器使用 - Docker教程
• Composer 安裝與使用
• 使用Rxjava計算圓周率

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。