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