iScroll-js—「smooth scrolling for the web」

原文地址：

http://bigdots.github.io/2015/12/15/iScroll-js%E2%80%94%E2%80%94smooth%20scrolling%20for%20the%20web/

1、什麼是iScroll

官方文檔的解釋： 
iScroll是一個高性能、佔用空間小、依賴免費的多平臺javascrip腳本庫。它應用於桌面設備、移動設備和智能電視。它一直在大力優化性能和大小以便在現代設備和舊設備上提供流暢的運行。iScroll不單單只是用來滾動。它還能夠處理任何用戶交互須要的元素移動。它增長了滾動,縮放,平移,無限滾動、視差滾動、旋轉木馬,而且它僅僅只有4 kb。

2、爲何要用iScroll

因爲不一樣的手機版本形成頁面的彈性滾動條兼容性很差，iscroll封裝了彈性滾動條插件能夠跨手機版本實現彈性滾動UI設計

3、Getting started

注意事項：

• IScroll須要對所要進行滾動的元素進行初始化。
• iScroll的數量沒有限制，你能夠在每一個頁面使用任意數量的iScroll(若是硬件容許的話)　　
• 保持DOM儘量簡單。最優的HTML結構是:

滾動區域必須包裹在Iscroll中。在上面的例子中,UL元素將滾動。只有第一個子元素是滾動的,額外的子元素則會被忽略掉。

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

---

實例化：

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

注意： 1.iScroll使用querySelector而不是querySelectorAll,因此選中的是第一個選擇器元素。若是你須要iScroll適用於多個對象你要構建循環。 2.iScroll須要在DOM加載完畢時啓動,最安全的辦法是綁定在窗口onload事件。 3.iScroll須要知道滾動區域的高度/寬度

4、配置iScroll

在初始化階段能夠經過第二個參數來配置iScroll

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

上面的示例打開了鼠標滾輪和滾動條支持。

經常使用參數： 
hScroll : false 禁止橫向滾動 true橫向滾動 默認爲true 
vScroll : false 精緻垂直滾動 true垂直滾動 默認爲true 
hScrollbar: false隱藏水平方向上的滾動條 
vScrollbar : false 隱藏垂直方向上的滾動條 
fixedScrollbar: 在iOS系統上，當元素拖動超出了scroller的邊界時，滾動條會收縮，設置爲true能夠禁止滾動條超出scroller的可見區域。默認在Android上爲true， iOS上爲false 
fadeScrollbar :　 false 指定在無漸隱效果時隱藏滾動條 
hideScrollbar :　 在沒有用戶交互時隱藏滾動條 默認爲true 
bounce : 　啓用或禁用邊界的反彈，默認爲true 
momentum 　 :啓用或禁用慣性，默認爲true，此參數在你想要保存資源的時候很是有用 
lockDirection : false取消拖動方向的鎖定， true拖動只能在一個方向上（up/down 或者left/right）