官網：http://iscrolljs.com/
IScroll最簡單的DOM結構:
<div id="wrapper"> <ul> <li>...</li> <li>...</li> ... </ul> </div>
初始化iscroll
var myScroll = new IScroll('#wrapper',options);初始化設置
初始化設置使用實例：
var myScroll = new IScroll('#wrapper', { mouseWheel: true, scrollbars: true });設置列表：
所屬 | 屬性名 | 說明 | 預設值 |
|---|---|---|---|
核心庫 croe | options.useTransform | 是否使用CSS3的Transform屬性 | true |
options.useTransition | 是否使用CSS3的Transition屬性，否則使用requestAnimationFram代替 | true | |
options.HWCompositing | 是否啟用硬件加速 | true | |
options.bounce | 是否啟用彈力動畫效果，關掉可以加速 | true | |
基礎特性 Basic features | options.click | 是否啟用click事件。建議關閉此選項並啟用自定義的tap事件（options.tap） | false |
options.disableMouse | 是否關閉鼠標事件探測。如知道運行在哪個平台，可以開啟它來加速。 | false | |
options.disablePointer | 是否關閉指針事件探測。如知道運行在哪個平台，可以開啟它來加速。 | false | |
options.disableTouch | 是否關閉觸摸事件探測。如知道運行在哪個平台，可以開啟它來加速。 | false | |
options.eventPassthrough | 使用IScroll的橫軸滾動時，如想使用系統立軸滾動並在橫軸上生效，請開啟。 event passthrough demo | false | |
options.freeScroll | 主要在上下左右滾動都生效時使用，可以向任意方向滾動。 2D scroll demo | false | |
options.keyBindings | 綁定按鍵事件。 Key bindings | false | |
options.invertWheelDirection | 反向鼠標滾輪。 | false | |
options.momentum | 是否開啟動量動畫，關閉可以提升效率。 | true | |
options.mouseWheel | 是否監聽鼠標滾輪事件。 | false | |
options.preventDefault | 是否屏蔽默認事件。 | true | |
options.scrollbars | 是否顯示默認滾動條 | false | |
options.scrollX options.scrollY | 可以設置是否顯示橫向或縱向滾動條 | scrollX false scrollY true | |
options.tap | 是否啟用自定義的tap事件 可以自定義tap事件名 | false | |
滾動條 Scrollbars | options.scrollbars | 是否顯示默認滾動條 | false |
options.fadeScrollbars | 是否漸隱滾動條，關掉可以加速 | true | |
options.interactiveScrollbars | 用戶是否可以拖動滾動條 | false | |
options.resizeScrollbars | 是否固定滾動條大小，建議自定義滾動條時可開啟。 | false | |
options.shrinkScrollbars | 滾動超出滾動邊界時，是否收縮滾動條。 'clip'：裁剪超出的滾動條 'scale':按比例的收縮滾動條（佔用CPU資源） false:不收縮， | false | |
options.indicators | 指示IScroll該如何滾動，Scrollbars的底層實現方式。 | ||
options.indicators.el | 制定滾動條的容器。容器中的第一個元素即為指示器。 例如： indicators: { el: document.getElementById('indicator') } indicators: { el: '#indicator' } | ||
options.indicators.ignoreBoundaries | 是否忽略容器邊界。設為true 可以設置滾動速度 parallax demo | false | |
options.indicators.listenX options.indicators.listenY | 指示器監聽那個方向的滾動，可以設置為一個方向或2個方向 | true | |
options.indicators.speedRatioX options.indicators.speedRatioY | 指示器相對主滾動條的速度 | 0 | |
options.indicators.fade options.indicators.interactive options.indicators.resize options.indicators.shrink | 如scrollbars的設置 minimap demo | ||
options.probeType | 需要使用iscroll-probe.js才能生效 probeType：1 滾動不繁忙的時候觸發 probeType：2 滾動時每隔一定時間觸發 probeType：3 每滾動一像素觸發一次 | ||
分割頁面snap | options.snap | 自動分割容器，用於製作走馬燈效果等。 Options.snap:true//根據容器尺寸自動分割 Options.snap:el//根據元素分割 | false |
縮放 zoom | options.zoom | 是否打開縮放 最好使用iscroll-zoom.js 如放大模糊，可將源容器定義為2倍大小，然後scale(0.5) zoom demo | false |
options.zoomMax | 最大縮放等級 | 4 | |
options.zoomMin | 最小縮放等級 | 1 | |
options.startZoom | 初始縮放等級 | 1 | |
options.wheelAction | 滾輪動作 設為'zoom'，可以用滾輪縮放 | undefined | |
更多設置 | options.bindToWrapper | 光標、觸摸超出容器時，是否停止滾動 | false |
options.bounceEasing | 彈力動畫效果 預置效果：'quadratic', 'circular', 'back', 'bounce', 'elastic'（最後兩個不能通過css3表現） 還可以自定義效果 bounceEasing: { style: 'cubic-bezier(0,0,1,1)',//css3時 fn: function (k) { return k; }//不使用css3，使用requestAnimationFrame時 } | 'circular' | |
options.bounceTime | 彈力動畫持續的毫秒數 | 600 | |
options.deceleration | 滾動動量減速 越大越快，建議不大於0.01 | 0.0006 | |
options.mouseWheelSpeed | 鼠標滾輪速度 | ||
options.preventDefaultException | 列出哪些元素不屏蔽默認事件； | {tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } | |
options.resizePolling | 重新調整窗口大小時，重新計算IScroll的時間間隔 | 60 | |
鍵位綁定 | options.keyBindings | 監聽按鍵事件控制IScroll 例如： keyBindings: { pageUp: 33, pageDown: 34, end: 35, home: 36, left: 37, up: 38, right: 39, down: 40 } | |
IScroll5的API：
所屬 | 方法名 | 說明 |
|---|---|---|
滾動 | scrollTo(x, y, time, easing) | 滾動到：x，y，事件，easing方式 x:int y:int time:int Easing: quadratic | circular | back | bounce | elastic 見IScroll.utils.ease 對象 例： myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic); |
scrollBy(x, y, time, easing) | 滾動到相對於當前位置的某處 其餘同上 | |
scrollToElement(el, time, offsetX, offsetY, easing) | 滾動到某個元素。 el為必須的參數 offsetX/offsetY：相對於el元素的位移。設為true即為屏幕中心 scroll to element | |
分割頁面snap | goToPage(x, y, time, easing) | 根據options.snap分割頁面，跳轉到橫向、縱向某頁。 XY可以同時生效。 結合options.snap使用 |
next() prev() | 上一頁，下一頁 結合options.snap使用 | |
縮放 | zoom(scale, x, y, time) | 縮放容器 Scale:縮放因子 |
重新整理 | refresh() | 刷新IScroll |
銷毀 | destroy() | 銷毀IScroll，節省資源 |
IScroll的事件：
beforeScrollStart | 用戶點擊屏幕，但是還未初始化滾動前 |
|---|---|
scrollCancel | 初始化滾動後又取消 |
scrollStart | 開始滾動 |
scroll | 滾動中 |
scrollEnd | 滾動結束 |
flick | 輕擊屏幕左、右 |
zoomStart | 開始縮放 |
zoomEnd | 縮放結束 |
事件使用實例：
myScroll = new IScroll('#wrapper'); myScroll.on('scrollEnd', doSomething);IScroll的屬性：
myScroll.x/y | 當前位置 |
|---|---|
myScroll.directionX/Y | 上一次的滾動方向(-1 下/右, 0 保持原狀, 1 上/左) |
myScroll.currentPage | 當前Snap信息 |
myScroll.maxScrollXmyScroll.maxScrollY | 當滾動到底部時的myScroll.x/y |