iScroll學習筆記

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

一、position：fixed 在移動端瀏覽器上的兼容性很差

簡單列舉以下：

IOS的Safari ：

• IOS5及之後的版本支持該屬性，
• IOS4及如下會把它當成默認的 position: static， 跟着頁面一塊兒滾動

Android ：

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

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

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

三、暫時沒有了，之後有了再補充

入門

基本的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