iScroll是高性能的、小尺寸的、無依賴關系的、支持多平台的滑動JavaScript庫。 當然，不只是scroll，還有滾動、縮放、平移、無限滾動、視差滾動等。
為了達到更好的新能，所以iScroll分為了很多版本，我們可以根據需要來使用，目前主要有下面的一些js庫：
- iscroll.js，它是通用腳本。它包括最常用的功能，並在占據很小的內存中提供非常高的性能。我們一般使用的都是這個。
- iscroll-lite.js，它是主要腳本的精簡版本。它不支持snap，scrollbars，鼠標滾輪，鍵綁定。但是如果您需要的只是滾動（尤其是在移動設備上），iScroll lite是最小，最快的解決方案。
- iscroll-probe.js，探測當前的滾動位置是一項艱巨的任務，這就是為什么我決定為此建立專用版本。如果您需要知道任何給定時間的滾動位置，這是iScroll。（我正在做一些更多的測試，這可能會在正常的
iscroll.js腳本中，所以請留意）。 - iscroll-zoom.js，添加縮放到標准滾動。
- iscroll-infinite.js，可以做無限次和緩存的滾動。處理很長的元素列表對於移動設備來說是不容易的。iScroll無限使用緩存機制，可以滾動潛在的無限數量的元素。
下面的連接是isroll常用的一些效果的demo，通過這些demo我們可以更好地學習與掌握。
https://github.com/cubiq/iscroll/tree/master/demos
下載安裝
在github上clone該庫，然后進入bulid文件夾中，我們就可以發現這些js文件了，目錄結構如下所示：
我們常用的一般是iscroll.js，這個文件不大，只有兩千行，50多kb，在實際生產環境中我們使用壓縮版本會更小。 也可以根據具體的需要選擇使用。
然后引入到項目文件中即可。
第一個例子
iscroll是不限制一個頁面中的滾動區域的數量的，但是對於每一個滾動區域，我們需要為它在外層添加一個.wrapper的類名(當然也可以是別的名稱)，如下所示：
<div id="wrapper"> <ul> <li>...</li> <li>...</li> ... </ul> </div>
沒錯，就是這么簡單，iscroll提倡簡潔的DOM。在這個例子中，ul將會被滾動，且只有容器的第一個孩子節點被滾動，其他的孩子將會被忽略。
提示：
box-shadow，opacity，text-shadow和alpha通道是不利於性能的。滾動可能看起來不錯，但是一旦你的DOM變得越來越復雜，性能表現將會變差。
然后就是配置腳本了，最終的最基礎的配置如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scroll</title> <script src="./build/iscroll.js"></script> <script> var myScroll; function load() { myScroll = new IScroll('.wrapper'); } </script> </head> <body onload="load()"> <div class="wrapper"> <ul> <li>1</li> <li>1</li> <li>1</li> </ul> </div> </body> </html>
需要在DOM准備就緒時啟動iScroll。最安全的打算是在窗口onload事件上啟動它。DOMContentLoaded或內聯初始化也很好，但請記住腳本需要知道滾動區域的高度/寬度。如果您的圖像沒有明確的寬度/高度聲明，iScroll將很可能最終導致錯誤的滾動尺寸。
另外： 在初始化IScroll實例時，我們這里傳入的類似於css選擇器，它只會獲得第一個元素，因為它調用的api是querySelector而不是querySelectorAll，所以如果頁面中有多個滾動區域，需要遍歷實現。 且我們還可以傳入獲得的元素，如new IScroll(document.getElementById("wrapper"));
配置IScroll
我們可以通過傳入第二個參數來配置iscroll，如下所示：
myScroll = new IScroll('.wrapper', { mouseWheel: true, scrollbars: false });
即使滑動支持鼠標的滾動和顯示scrolllbar。
iScroll使用各種技術根據設備/瀏覽器功能滾動，通常您不需要配置引擎，iScroll足夠聰明，為您挑選最好的。盡管如此，重要的是了解iScroll工作的機制以及如何配置它們。
- useTransform 默認為true， 即使用css的transform屬性。
- useTransition 默認為true， 即執行動畫。
- HWCompositing 默認為true， 此選項嘗試通過附加
translateZ(0)到轉換CSS屬性將卷軸放在硬件層上。這大大提高了性能，特別是在移動設備上。
基本功能
- bounce：彈跳 默認為true，即滾輪遇到邊界時，會執行一個彈跳動畫，如果設置為false，那么表現會更平滑。
- click: 點擊 默認為false， iscroll必須阻止某些默認的瀏覽器行為。如果希望應用程序響應點擊事件，則必須設置為true。
- disableMouse 、 disablePointer、 disableTouch： 這些功能默認為false， 如果需要，可以設置為true。
- freeScroll：默認為false。 通常對於2D的滾動，往往是左右滾動時，上下不可滾動；上下滾動時，左右不可滾動，如果設置為true，我們就可以隨意滾動。
- momentum: 默認為true， 當用戶在屏幕上快速輕彈時，您可以打開/關閉動畫動畫。關閉這個大大提高了性能
- mouseWheel： 默認為true，監聽鼠標滾輪事件。
- preventDefault: 默認為true，阻止默認事件。
- scrollbars: 默認為false。
- scrollX和scrollY： 默認垂直滾動，即前者為false，后者為true。
- startX和startY： 默認滾動的起始位置為00。 也可以自行設置。
- tap: 默認為false。即當用戶點擊到scrollbars時是否觸發事件。
- fadeScrollbars: 默認為false。 當不使用時，滾動條會消失。
- interactiveScrollbars： 默認為false。 用戶條變得可拖動，用戶可以與之交互。
- resizeScrollbars: 默認為true。 即我們可以自定義scrollbars的大小比例等。
- shrinkScrollbars: 默認為false。 有效值為clip和scale
'。clip'只需將指示器移動到其容器外部，印象就是滾動條縮小，但它只是簡單地移出屏幕。如果您可以通過視覺效果生活，此選項將大大提高整體性能。
對滾動條進行個性化設置： 首先設置scrollbars為custom。 然后就可以使用下面的類來設計了：
- .iScrollHorizontalScrollbar，它應用於水平容器。實際托管滾動條指示器的元素。
- .iScrollVerticalScrollbar，與上述相同，但用於垂直容器。
- .iScrollIndicator，實際的滾動條指示器。
- .iScrollBothScrollbars，當顯示兩個滾動條時，這將添加到容器元素中。通常只有一個（水平或垂直）是可見的。
更多請參考官方文檔。
結束