都說(shuō)iScroll是移動(dòng)端開(kāi)發(fā)必學(xué)的庫(kù)之一，先來(lái)看看為啥要用iScroll。網(wǎng)上找了找資料，總結(jié)下原因如下：

1、position：fixed 在移動(dòng)端瀏覽器上的兼容性不好

簡(jiǎn)單列舉如下：

IOS的Safari ：

• IOS5及以后的版本支持該屬性，
• IOS4及以下會(huì)把它當(dāng)成默認(rèn)的 position: static， 跟著頁(yè)面一起滾動(dòng)

Android ：

• Android 2.1及以下不支持
• Android 2.2會(huì)在滾動(dòng)完成之后把定位的元素拉回到原來(lái)的位置
• Android 2.3 只有在禁止頁(yè)面縮放的情況下才支持固定定位
• Android 3 和 4 支持

更多的機(jī)型和瀏覽器版本請(qǐng)戳這里

2、原生的滾動(dòng)在手機(jī)瀏覽器上不太流暢，體驗(yàn)不好

3、暫時(shí)沒(méi)有了，以后有了再補(bǔ)充

入門

基本的DOM結(jié)構(gòu)如下：

<header>IScoll</header> <div id="wrapper"><ul><li></li>...</ul> </div> <footer>Footer</footer>

外部容器的 id 必須為 wrapper 這是源碼里寫死的，只有容器的第一個(gè)子元素才能滾動(dòng)，上面的代碼中，滾動(dòng)的是ul。

給wrapper添加一個(gè) position: relative 或者 absolute 可以解決很多因錯(cuò)誤計(jì)算容器尺寸造成的問(wèn)題。

每個(gè)需要滾動(dòng)的區(qū)域都需要進(jìn)行初始化，初始化代碼如下

document.addEventListener('DOMContentLoaded', loadHandler, false);function loadHandler(){var myScroll = new IScroll('#wrapper'); }

然后就可以滾動(dòng)了，超級(jí)簡(jiǎn)單有木有！！

初始化代碼最好放在 window onload 事件處理函數(shù)中，或者 DOMContentLoaded 事件處理函數(shù)中，腳本需要知道滾動(dòng)區(qū)域的寬/高，如果有一些圖片沒(méi)有指定寬高，IScroll可能會(huì)錯(cuò)誤地計(jì)算滾動(dòng)尺寸。

如果DOM結(jié)構(gòu)比較復(fù)雜，onload之后留出100到200毫秒的時(shí)間給iScroll初始化是比較明智的，

另外，文檔里還有這樣一段話：

box-shadow, opacity, text-shadow 和 alpha 通道這些屬性不能和硬件加速很好的結(jié)合。當(dāng)只有少量元素時(shí)，滾動(dòng)效果會(huì)很流暢，但是一旦你的DOM結(jié)構(gòu)變的很復(fù)雜，就會(huì)體驗(yàn)很渣.

配置參數(shù)說(shuō)明

hScroll: true, //是否水平滾動(dòng) vScroll: true, //是否垂直滾動(dòng) x: 0, //滾動(dòng)水平初始位置 y: 0, //滾動(dòng)垂直初始位置 snap: true, //值可以為true或是DOM元素的tagname，當(dāng)為true時(shí)，對(duì)齊的坐標(biāo)會(huì)根據(jù)可滾動(dòng)的位置和滾動(dòng)區(qū)域計(jì)算得到可滑動(dòng)幾頁(yè)，如果為tagname,則滑動(dòng)會(huì)對(duì)齊到元素上 bounce: true, //是否超過(guò)實(shí)際位置反彈 bounceLock: false, //當(dāng)內(nèi)容少于滾動(dòng)是否可以反彈，這個(gè)實(shí)際用處不大 momentum: true, //動(dòng)量效果，拖動(dòng)慣性 lockDirection: true, //當(dāng)水平滾動(dòng)和垂直滾動(dòng)同時(shí)生效時(shí)，當(dāng)拖動(dòng)開(kāi)始是否鎖定另一邊的拖動(dòng) useTransform: true, //是否使用CSS形變 useTransition: false, //是否使用CSS變換 topOffset: 0, //已經(jīng)滾動(dòng)的基準(zhǔn)值(一般情況用不到) checkDOMChanges: false, //是否自動(dòng)檢測(cè)內(nèi)容變化(這個(gè)檢測(cè)不是很準(zhǔn))//Scrollbar相關(guān)參數(shù)，通過(guò)scrollbar這些參數(shù)可以配置iscroll的滾動(dòng)條，通過(guò)scrollbarClass可以自己定義一套滾動(dòng)條的樣式。 hScrollbar: true, //是否顯示水平滾動(dòng)條 vScrollbar: true, //同上垂直滾動(dòng)條 fixedScrollbar: isAndroid, //對(duì)andriod的fixed hideScrollbar: isIDevice, //是否隱藏滾動(dòng)條 fadeScrollbar: isIDevice && has3d, //滾動(dòng)條是否漸隱漸顯 scrollbarClass: '', //自定義滾動(dòng)條的樣式名//Zoom放大相關(guān)的參數(shù)，通過(guò)它，對(duì)于一個(gè)固定顯示圖片區(qū)域的類似應(yīng)用，可以非常簡(jiǎn)單的做到固定滾動(dòng)，包括兩指放大的應(yīng)用。 zoom: false, //默認(rèn)是否放大 zoomMin: 1, //放大的最小倍數(shù) zoomMax: 4, //最大倍數(shù) doubleTapZoom: 2, //雙觸放大幾倍 wheelAction: 'scroll', //鼠標(biāo)滾動(dòng)行為（還可以是zoom）//自定義Events相關(guān)參數(shù) onRefresh: null, //refresh 的回調(diào)，關(guān)于自身何時(shí)調(diào)用refresh 后面會(huì)繼續(xù)談到 onBeforeScrollStart: function(e){ e.preventDefault(); }, //開(kāi)始滾動(dòng)前的時(shí)間回調(diào)，默認(rèn)是阻止瀏覽器默認(rèn)行為 onScrollStart: null, //開(kāi)始滾動(dòng)的回調(diào) onBeforeScrollMove: null, //在內(nèi)容移動(dòng)前的回調(diào) onScrollMove: null, //內(nèi)容移動(dòng)的回調(diào) onBeforeScrollEnd: null, //在滾動(dòng)結(jié)束前的回調(diào) onScrollEnd: null, //在滾動(dòng)完成后的回調(diào) onTouchEnd: null, //手離開(kāi)屏幕后的回調(diào) onDestroy: null, //銷毀實(shí)例的回調(diào) onZoomStart: null, //開(kāi)始放大前的回調(diào) onZoom: null, //放大的回調(diào) onZoomEnd: null //放大完成后的回調(diào)

方法

destroy 顧名思義，是用來(lái)銷毀你實(shí)例化的iScroll 實(shí)例，包括之前綁定的所有iscroll 事件。 refresh 這個(gè)方法非常有用，當(dāng)你的滾動(dòng)區(qū)域的內(nèi)容發(fā)生改變 或是 滾動(dòng)區(qū)域不正確，都用通過(guò)調(diào)用refresh 來(lái)使得iscroll 重新計(jì)算滾動(dòng)的區(qū)域，包括滾動(dòng)條，來(lái)使得iscroll 適合當(dāng)前的dom。 scrollTo 這個(gè)方法接受4個(gè)參數(shù) x, y, time, relative x 為移動(dòng)的x軸坐標(biāo)，y為移動(dòng)的y軸坐標(biāo), time為移動(dòng)時(shí)間，relative表示是否相對(duì)當(dāng)前位置。 scrollToElement 這個(gè)方法實(shí)際上是對(duì)scrollTo的進(jìn)一步封裝，接受兩個(gè)參數(shù)(el,time)，el為需要滾動(dòng)到的元素引用，time為滾動(dòng)時(shí)間。 scrollToPage 此方法接受三個(gè)參數(shù)(pageX,pageY,time) 當(dāng)滾動(dòng)內(nèi)容的高寬大于滾動(dòng)范圍時(shí)，iscroll 會(huì)自動(dòng)分頁(yè)，然后就能使用scrollToPage方法滾動(dòng)到頁(yè)面。當(dāng)然，當(dāng)hscroll 為false 的時(shí)候，不能左右滾動(dòng)。pageX這個(gè)參數(shù)就失去效果 disable 調(diào)用這個(gè)方法會(huì)立即停止動(dòng)畫滾動(dòng)，并且把滾動(dòng)位置還原成0，取消綁定touchmove, touchend、touchcancel事件。 enable 調(diào)用這個(gè)方法，使得iscroll恢復(fù)默認(rèn)正常狀態(tài) stop 立即停止動(dòng)畫 zoom 改變內(nèi)容的大小倍數(shù),此方法接受4個(gè)參數(shù)，x,y,scale,time 分別表示的意思為，放大的基準(zhǔn)坐標(biāo)，以及放大倍數(shù)，動(dòng)畫時(shí)間 isReady 當(dāng)iscroll 沒(méi)有處于正在滾動(dòng)，沒(méi)有移動(dòng)過(guò)，沒(méi)有改變大小時(shí)，此值為true

轉(zhuǎn)載于:https://www.cnblogs.com/walle2/p/4830948.html

總結(jié)

以上是生活随笔為你收集整理的iScroll学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。