行動端插件IScroll.js應該如何使用

我們知道，IScroll.js插件是相容所有行動裝置捲軸事件的插件，在某些安卓機中，我們沒辦法透過overflo:scroll操作捲軸；但IScroll.js確可以放在安全的容器元素中處理滾動，下面就跟大家詳細介紹一下IScroll.js。

注意

在使用IScroll.js必須要有3層元素嵌套，如：

<div class="food-left">
    <ul class="food-nav">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul></div>

最外層的food-left必須要有兩個css樣式：position:relative;和overflow:hidden。

初始化

IScroll.js給我們暴露了一個IScroll建構子;
如下，我們進行了初始化

<script type="text/javascript">
      leftScroll = new IScroll(".food-left");</script>

建構子中傳入的實參，與ES6新增的querySelector參數一致；其實querySelector就與我們的jQuery選擇器使用方式是一樣的；
注意：我們必須在DOM結構載入完畢後才能初始化，否則會無效。

設定

IScroll.js允許我們傳入第二個參數來配置滾動事件的屬性;

leftScroll = new IScroll(".food-left", {
       scrollbars: true,
       bounce: false,
       mouseWheel:true,
       click:true});

滾動條

scrollbars: true

是否顯示滾動條。預設為false;

fadeScrollbars:true

滾動條淡入淡出效果,當然前提是你滾動條顯示了。預設為false;

interactiveScrollbars

是否拖曳滾動條。預設為false;

resizeScrollbars

滾動條的長度是按照比例設定的，如果想要固定尺寸，可以設定為flase;預設為true;

bounce: false

滾動到達容器邊界時是否執行反彈動畫。預設為true;

mouseWheel:true

是否顯示啟用滑鼠捲動;預設為false;

invertWheelDirection

啟動滑鼠捲動後是否啟用反向捲動;預設為false;

click:true

iScroll禁止預設滑鼠的點擊行為，如果要使用設定true;預設為false;

disableMouse、disablePointer、options.disableTouch

IScrol預設監聽所有的指標事件，如果確認專案定位的平台，可以將不使用的效果停用，減少資源佔用；預設為false;

startX、startY

設定滾動條初始偏移位置；預設為無;

方法

IScroll.js也提供我們一些方便的方法,當然都是實例物件下的；

rightScroll.scrollToElement(el, time, offsetX, offsetY, easing)

滾動到傳入元素的位置，必須是原生DOM物件；然後是滾動的時間；

scrollTo(x, y, time, easing)

可以滾動到任意的位置，預設位置是0，如果要移動需要設定負數；

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

nodej中的xml2js需要如何使用

node.js的path模組詳解

以上是行動端插件IScroll.js應該如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！