IScroll是移動頁面上被使用的一款仿系統滾動插件。IScroll5相對于之前的IScroll4改進了許多，使得大家可以更方便的定制所需的功能了。
做項目的時候正好用到了這個插件，自己做了一下總結，發在這里方便大家學習IScroll5。
官網：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的事件
事件使用實例：
myScroll = new IScroll('#wrapper'); myScroll.on('scrollEnd', doSomething);
?
| beforeScrollStart | 用戶點擊屏幕，但是還未初始化滾動前 |
| scrollCancel | 初始化滾動后又取消 |
| scrollStart | 開始滾動 |
| scroll | 滾動中 |
| scrollEnd | 滾動結束 |
| flick | 輕擊屏幕左、右 |
| zoomStart | 開始縮放 |
| zoomEnd | 縮放結束 |
?
IScroll的屬性
| myScroll.x/y | 當前位置 |
| myScroll.directionX/Y | 上一次的滾動方向(-1?下/右,?0?保持原狀,?1?上/左) |
| myScroll.currentPage | 當前Snap信息 |
| myScroll.maxScrollXmyScroll.maxScrollY | 當滾動到底部時的?myScroll.x/y ? |
O哈哈~)
