前段時間在搞移動終端（移動web）的專案，其中需要用到滾動的功能（html的滾動效果不好，且在低版本上不支援）。後面上網找了下資料，發現大部分人都在用iscroll4（下面簡稱v4）,下載下來試了下確實不錯。在PC上滾動效果確定很好，在整合到移動web中，在部分機型（或者部分系統版本）上有卡頓，不是很流暢，有可能是配置低，也有可能某些屬性設定錯誤造成滑動不順暢。後面又上網查詢資料，發現了iscroll5(下面簡稱v5)的測試版本(bate5.0.1)已經出來，果斷下載下來耍耍（地址：http://cubiq.org/iscroll-5-ready-for-beta-test）

     不過v5和v4差距也是有點大，對於想升級到v5的朋友們，可能要花點時間看原始碼做相應的升級調整（因為官方還未有相關文件出來），今天筆者藉著使用過的一些功能的升級調整方式和注意點大概說明下（筆者沒有去看全部的原始碼，只是將之前iscroll4用到的功能做相應調整），廢話不多說，開始！

  1、  首先是iscroll的例項化方式

v4
var scroller = new iScroll('id');

v5
var scroller = new IScroll('#id');

 i改成大寫了，應該是為了規範寫法。後面的目標由原來的只能是DOM物件或者id改成可以支援DOM物件和選擇器選擇，原始碼中的選擇方式是document.querySelector(el)，而不再是document.getElementById(el);

2 、v5不再對目標新增overflow:hidden，使用者有需求可以自行新增

3、v5的事件也不再是在option裡面寫了，而是仿造jquery的on繫結事件的方式。

v4
var scroller = new iScroll('id',{
     scrollStart : function(){
         onsole.log('scroll started');
     }
});

v5
var scroller = new IScroll('#id');
scroller.on('scrollStart', function () { console.log('scroll started'); });

4、v4中獲取當前頁的索引什麼的是通過this.currPageX或者this.currPageY,而v5則是放在this.currentPage中，如要獲取水平當前頁的索引this.currentPage.pageX；

      v4中滾動到某一頁的事件呼叫是scrollToPage(x,y,time) ,而v5中則是gotoPage(x,y,time,easing);easing 為v5中新加的滾動到邊界時的反應特效，這裡不細說，大家可以自己嘗試看看,注意：若添加了特效，scrollEnd事件不會觸發（測試版本可能沒有新增支援，筆者已經留言給iscroll作者）,如在v4中有實現上拉載入更多等事件，則無法新增特效，否則你會發現上拉載入更多的邏輯不會執行。

5、v5測試版中的事件比較少，很多事件都還沒新增，如v4中的scrollMove也沒有，由於專案需要，我暫時在原始碼中_move函式的最後面添加了支援

//新增一個滾動過程中的事件擴充套件,目前這個版本中只對scrollStart、scrollEnd、refresh、三個事件進行擴充套件,
//若將來新版本有加此事件,可相應替換,（名字是自己隨便寫的，只要和使用時繫結的事件名字一樣就行）
this._execEvent('scrollMove');
//end add

6、v5預設水平滾動禁用掉，豎直預設啟用，而v4中則是預設都啟用。

7、V4中可通過設定option的以下引數來控制當滾動時出現滾動條，滾動結束則隱藏滾動條，v5無法實現（實際上很多option都不一樣了，或者說根本沒有支援了，也許以後會慢慢的新增，畢竟現在只是測試版本）

fixedScrollbar : true,
hideScrollbar  : true,

目前可以通過以下程式碼來暫時實現

var iSObj = new IScroll(obj,opt);
				
//滾動條在滾動時顯示出來,滾動結束隱藏
iSObj.on("scrollEnd",function(){
	if(this.indicator1){
		this.indicator1.indicatorStyle['transition-duration'] = '350ms';
		this.indicator1.indicatorStyle['opacity'] = '0';
	}
});
iSObj.on("scrollMove",function(){
	if(this.indicator1){
		this.indicator1.indicatorStyle['transition-duration'] = '0ms';
		this.indicator1.indicatorStyle['opacity'] = '0.8';
	}
});

8、v4預設若內容不超過顯示區域，則不會出現滾動條，就算手指過去滾動，也不會有任何反應，就算你設定了滾動條預設顯示，他也不會出現滾動條。v4中就算內容比較少，但是你去滾動，還是會有到邊界反彈回來的效果，而且若有開啟滾動條，滾動條也會顯示。

-------------------------------------------------------------------------------------------------------------

9、v5.0.4目前還未提供下拉重新整理和上拉載入的demo，上拉載入和v4的demo類似，下拉需要臨時方案解決（改原始碼）

1)、options中加一個屬性 topOffset : 0

2)、resetPostion方法中的

if ( x == this.x && y == this.y ) {
	return false;
}

前面加上

y = this.y >= this.minScrollY || this.maxScrollY > 0 ? this.minScrollY : this.y < this.maxScrollY ? this.maxScrollY : this.y;

3)、refresh中的

var rf = this.wrapper.offsetHeight;		// Force reflow

this.wrapperWidth	= this.wrapper.clientWidth;
this.wrapperHeight	= this.wrapper.clientHeight;
		
//add 
this.minScrollY = -this.options.topOffset || 0;
//end add
/* REPLACE START: refresh */

this.scrollerWidth	= this.scroller.offsetWidth;
		
//mdy
//this.scrollerHeight	= this.scroller.offsetHeight
this.scrollerHeight	= this.scroller.offsetHeight+ this.minScrollY;
//end mdy
/* REPLACE END: refresh */

this.maxScrollX		= this.wrapperWidth - this.scrollerWidth;
		
//mdy 
//this.maxScrollY	= this.wrapperHeight - this.scrollerHeight;
this.maxScrollY		= this.wrapperHeight - this.scrollerHeight+ this.minScrollY;
//end mdy 
..................
..................
..................

10、v4中如果既要上下又要左右滾動，可考慮雙層巢狀，但是一般 不建議雙層巢狀，體驗不是很好，會有蠻多問題，儘量去避免這種需求，做到一個方向的滾動即可。如果實在是需要也不是很大問題。v4一個很大的問題是若用雙層巢狀，使用者在滑動時若稍微有點斜著滑就會造成整塊滑動區域都飄起來了（也就是說他即在做左右滑動又在做上下滑動，但實際上我們的需求是使用者同一時間只能是某一個方向滑動）v5.0.1版本有解決了這個問題，v5.0.4又有這個問題了（不知道作者什麼想法），可以通過修改原始碼的臨時方案解決.但是此種方案只能解決在使用者一開始按住滑動只有一個方向，哪怕一畫素，這時候不管你如果滑動，都會保證只有一個方向可以滑動（我們需要的），而如果使用者一開始按住滑動是直接45度斜角滑的 ，那麼此問題還是存在。

_move: function (e) {
	if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) {
		return;
	}

	if ( this.options.preventDefault ) {	// increases performance on Android? TODO: check!
		e.preventDefault();
	}

	var point		= e.touches ? e.touches[0] : e,
		
	    //mdy 
	    //這2句必須換成下面那2句，否則當多層巢狀（即有上下滾動又有左右滾動）時會變成一邊左右滾一邊上下滾，但實際上我們只需要專注某一個方向
	    //deltaX		= this.hasHorizontalScroll ? point.pageX - this.pointX : 0,
	    //deltaY		= this.hasVerticalScroll   ? point.pageY - this.pointY : 0,
	    deltaX		= point.pageX - this.pointX,
	    deltaY		= point.pageY - this.pointY,
			
	    //end mdy 
	    timestamp	= utils.getTime(),
	    newX, newY,
	    absDistX, absDistY;

	    this.pointX		= point.pageX;
	    this.pointY		= point.pageY;
.............................
.............................
.............................

11、若遇到在滾動區域中某些地方的預設事件無法觸發（如A標籤的連結），基本上是由於IScroll把滾動區域中的表單元素預設事件都禁用掉了，也就是e.preventDefault()（為了滾動順暢），可根據需要在原始碼中做個判斷，比如你想保留A標籤的預設事件，則可以對被點選的元素的tagName進行判斷，然後決定要不要e.preventDefault()。

完整demo下載地址：http://download.csdn.net/detail/gcz564539969/6901753