入門(mén)

你想成為iScroll大師。行，這就是我寫(xiě)以下內(nèi)容的目的。

最好的學(xué)習(xí)iScroll的方法是看示例。在存檔文件中你會(huì)發(fā)現(xiàn)一個(gè)叫做demo的文件夾示例。這里有大多數(shù)腳本功能的概述。

IScroll是一個(gè)類(lèi)，每個(gè)需要使用滾動(dòng)功能的區(qū)域均要進(jìn)行初始化。每個(gè)頁(yè)面上的iScroll實(shí)例數(shù)目在設(shè)備的CPU和內(nèi)存能承受的范圍內(nèi)是沒(méi)有限制的。

盡可能保持DOM結(jié)構(gòu)的簡(jiǎn)潔。iScroll使用硬件合成層但是有一個(gè)限制硬件可以處理的元素。

最佳的HTML結(jié)構(gòu)如下：

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

iScroll作用于滾動(dòng)區(qū)域的外層。在上面的例子中，UL元素能進(jìn)行滾動(dòng)。只有容器元素的第一個(gè)子元素能進(jìn)行滾動(dòng)，其他子元素完全被忽略。

box-shadow, opacity, text-shadow and alpha channels are all properties that don't go very well together with hardware acceleration. Scrolling might look good with few elements but as soon as your DOM becomes more complex you'll start experiencing lag and jerkiness.

Sometimes a background image to simulate the shadow performs better than box-shadow. The bottom line is: experiment with CSS properties, you'll be surprised by the difference in performance a small CSS change can do.

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

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

第一個(gè)參數(shù)可以是滾動(dòng)容器元素的DOM選擇器字符串，也可以是滾動(dòng)容器元素的引用對(duì)象。下面是一個(gè)有效的語(yǔ)法：

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

所以基本上你要么直接傳遞元素，要么傳遞一個(gè)querySelector字符串。因此可以使用css名稱(chēng)代替ID去選擇一個(gè)滾動(dòng)器容器,如下:

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

注意，iScroll使用的是querySelector 而不是 querySelectorAll，所以iScroll只會(huì)作用到選擇器選中元素的第一個(gè)。如果你需要對(duì)多個(gè)對(duì)象使用iScroll，你需要構(gòu)建自己的循環(huán)機(jī)制。