都說iScroll是移動端開發必學的庫之一，先來看看為啥要用iScroll。網上找了找資料，總結下原因如下：

1、position：fixed 在移動端瀏覽器上的兼容性不好

簡單列舉如下：

IOS的Safari ：

• IOS5及以后的版本支持該屬性，
• IOS4及以下會把它當成默認的 position: static， 跟著頁面一起滾動

Android ：

• Android 2.1及以下不支持
• Android 2.2會在滾動完成之后把定位的元素拉回到原來的位置
• Android 2.3 只有在禁止頁面縮放的情況下才支持固定定位
• Android 3 和 4 支持

更多的機型和瀏覽器版本請戳這里

2、原生的滾動在手機瀏覽器上不太流暢，體驗不好

3、暫時沒有了，以后有了再補充

入門

基本的DOM結構如下：

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

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

給wrapper添加一個 position: relative 或者 absolute 可以解決很多因錯誤計算容器尺寸造成的問題。

每個需要滾動的區域都需要進行初始化，初始化代碼如下

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

然后就可以滾動了，超級簡單有木有！！

初始化代碼最好放在 window onload 事件處理函數中，或者 DOMContentLoaded 事件處理函數中，腳本需要知道滾動區域的寬/高，如果有一些圖片沒有指定寬高，IScroll可能會錯誤地計算滾動尺寸。

如果DOM結構比較復雜，onload之后留出100到200毫秒的時間給iScroll初始化是比較明智的，

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

box-shadow, opacity, text-shadow 和 alpha 通道這些屬性不能和硬件加速很好的結合。當只有少量元素時，滾動效果會很流暢，但是一旦你的DOM結構變的很復雜，就會體驗很渣.

配置參數說明

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

方法

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

轉載于:https://www.cnblogs.com/walle2/p/4830948.html

總結

以上是生活随笔為你收集整理的iScroll学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。