IScroll 實踐指南(上)

IScroll 實踐指南
之因此iscroll會誕生，主要是由於不管是在iphone、ipod、android 或是更早前的移動webkit都沒有提供一種原生的方式來支持在一個固定高度的容器內滾動內容。
這個不幸的規則致使全部web-app要模擬成app的樣子時，只能由一個絕對定位的header 或是footer再加上一個能夠內容的滾動的中間區域組成。
幸運的是移動webkit提供了一種強大的硬件加速的CSS屬性，這個屬性能夠用來模擬這個缺失的功能，Iscroll從這裏開始了前進之路，可是沒有不帶刺的玫瑰。讓內容滾動像原生方式通常比想象中要難

iscroll官網
iscroll例子

截至到筆者發佈這篇文章時，經過樣式:

     overflow:scroll;
     -webkit-overflow-scrolling:touch;

IOS5 已經可以支持區域滾動了。可是andriod4 仍是不行...

iScroll 使用起來很簡單，首先你須要一個合理的DOM結構：

<div id="wrapper">
	<ul id="scroll">
		<li></li>
		...
		...
	</ul>
</div>

其次是推薦的樣式：

#wrapper {
    position:relative;
    z-index:1;
    width:/* your desired width, auto and 100% are fine */;
    height:/* element height */;
    overflow:/* hidden|auto|scroll */;
}

官方推薦這樣的結構，由於iscroll只能滾動wrapper裏的第一個子節點，或者說惟一一個子節點才能使得iscroll正 確的生效。由於這個節點須要一個絕對定位的CSS屬性，更重要的是這個節點裏所包裹的內容有了一個統一的容器，咱們只須要計算以後修改這個容器的屬性值就 能夠達到咱們滾動的效果。

iscroll 須要兩個參數，第一個很簡單就是外容器的id,第二個參數是一個參數對象。
經過這個對象能夠傳入iscroll的各項參數來配置iscroll。
他的參數基本分爲四個部分

• 基礎
• 滾動條
• 放大縮小
• 事件回調

如下由筆者整理的iScroll參數以及其表明的意思：

hScroll: true, //是否水平滾動
vScroll: true, //是否垂直滾動
x: 0, //滾動水平初始位置
y: 0, //滾動垂直初始位置
bounce: true, //是否超過實際位置反彈
bounceLock: false, //當內容少於滾動是否能夠反彈，這個實際用處不大
momentum: true, //動量效果，拖動慣性
lockDirection: true,
//當水平滾動和垂直滾動同時生效時，當拖動開始是否鎖定另外一邊的拖動
useTransform: true, //是否使用CSS形變
useTransition: false, //是否使用CSS變換
topOffset: 0, //已經滾動的基準值(通常狀況用不到)
checkDOMChanges: false, //是否自動檢測內容變化  

checkDOMChanges 這個不是十分靠得住，由於他目前是輪詢檢測offsetWidth、offsetHeight，而後纔去調自身的refresh 從新計算滾動區域，可是有時候只檢測這個不是很準..

	// Scrollbar 的相關參數
	hScrollbar: true, //是否顯示水平滾動條
	vScrollbar: true, //同上垂直滾動條
	fixedScrollbar: isAndroid, //對andriod的fixed
	hideScrollbar: isIDevice,  //是否隱藏滾動條
	fadeScrollbar: isIDevice && has3d, //滾動條是否漸隱漸顯
	scrollbarClass: '', //字定義滾動條的樣式名

經過scrollbar這些參數能夠配置iscroll的滾動條，經過scrollbarClass能夠本身定義一套滾動條的樣式。

	// Zoom 放大相關的參數
	zoom: false, //默認是否放大
	zoomMin: 1, //放大的最小倍數
	zoomMax: 4, //最大倍數
	doubleTapZoom: 2, //雙觸放大幾倍
	wheelAction: 'scroll', //鼠標滾動行爲（還能夠是zoom）

這個Zoom我以爲比較好用，對於一個固定顯示圖片區域的相似應用，能夠很是簡單的作到固定滾動，包括兩指放大的應用。
wheelAction 這個參數是給PC的鼠標滾動定義的，能夠定義爲滾動鼠標滾輪放大。

// 自定義 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

經過了解以上參數，你能夠很是容易的配置本身的iscroll 應用：
你能夠經過onScrollEnd 事件回調在結束滾動後執行一段你本身的代碼
你也能夠簡單的新建一個能夠經過雙觸放大的固定滾動區域。
你也能夠什麼都不作，只是簡單的約定碰到邊界是否反彈，等等。

var myscroll = new iScroll('wrapper', {
     hScroll: false, //是否水平滾動
     vScroll: true, //是否垂直滾動
     y: 10, //滾動垂直初始位置
     bounce : false
});

固然，在使用時，若是對建立的iscroll 實例保存引用會有不少好處：
你能夠在內容改變時，DOM結構發生改變時調用 myscroll.refresh() 來從新計算固定滾動區域的內容高度，從而使得你的iscroll工做正常。
你也能夠在你的應用結束時，用過這個引用調用destroy方法來，銷燬這個iscroll 實例
等等....
固然，iscroll提供的Api也是很是豐富，因此咱們能夠經過使用iscroll來作不少webapp的應用。