clip 基本 包括 sla 大量 oot 屬性 con padding

下載iScroll4.2.5

iScroll的歷史

之所以iscroll會誕生，主要是因為無論是在iphone、ipod、android 或是更早前的移動webkit都沒有提供一種原生的方式來支持在一個固定高度的容器內滾動內容。

這個不幸的規則導致所有web-app要模擬成app的樣子時，只能由一個絕對定位的header 或是footer再加上一個可以內容的滾動的中間區域組成。

幸運的是移動webkit提供了一種強大的硬件加速的CSS屬性，這個屬性可以用來模擬這個缺失的功能，Iscroll從這裏開始了前進之路，但是沒有不帶刺的玫瑰。讓內容滾動像原生方式一般比想象中要難

Tigs：截至2013年，IOS5 添加如下樣式 overflow:scroll; -webkit-overflow-scrolling:touch; 已經能夠支持區域滾動了。但是andriod4 還是不行...

iScroll 4 新特性

iScroll 4 這個版本完全重寫了iScroll 3這個框架的原始代碼，除了以前版本的iScroll特性以外，iScroll 4 還包括如下的特性：

1. 縮放
2. 拉動刷新
3. 速度和性能提升
4. 精確捕捉元素
5. 自定義滾動條

快速上手

使用指南

在此文檔中你會發現很多例子來教會你如何快速上手iScroll腳本庫。參看文中的demo小例子並仔細閱讀此文檔，可能有點小無聊，但是這篇文章中卻是iScroll這個腳本庫的精髓之所在哦。

iScroll需要對所要進行滾動的元素進行初始化，並且不限定一個頁面中使用iScroll的元素的個數（這裏不考慮您的硬件配置）。滾動元素中內容的類型和長度在一定程度上將會影響iScroll腳本庫裏可以同時使用的元素的個數。

使用iScroll這個腳本庫時，DOM樹的結構要足夠簡單，移除不必要的標簽，盡量避免過多的標簽嵌套使用。

最優的使用iScroll的結構如下所示：

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

在這個小例子中，ul標簽將會被滾動。iScroll一定要與滾動內容外面的wrapper進行聯系才會產生效果。

註意事項

只有wrapper裏的第一個子元素才可以滾動，如果你想要更多的元素可以滾動，那麽你可以試試下面的這種寫法：

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

在這個例子中，scroller這個元素可以滾動，即便它包含兩個ul元素

實例化iScroll

iScroll必須在調用之前實例化，你可以在下面幾種情況下對iScroll進行實例化：

1. onDOMContentLoaded
2. onLoad
3. 以內聯inline方式

ONDOMContentLoaded

適用於滾動內容只包含文字、圖片，並且所有的圖片都有固定的尺寸

使用方法：（在head標簽中添加如下代碼）

	<script src="iscroll.js"></script>
	<script>
			var myscroll;
			function loaded(){
				myscroll=new iScroll("wrapper");
			}
			window.addEventListener("DOMContentLoaded",loaded,false);
	</script>

註意： myscroll這個變量是全局的，因此你可以在任何地方調用它的函數

onLoad

有些時候在DOMContentLoaded的狀態下就初始化iScroll其實是有點草率的，因此此時頁面的資源可能還沒有全部加載完畢。如果你遇到了一些很怪異的行為可以試試下面的寫法：

	<script src="iscroll.js"></script>
	<script>
		var myscroll;
		function loaded(){
			setTimeout(function(){
				myscroll=new iScroll("wrapper");
			}，100 );
		}
		window.addEventListener("load",loaded,false);
	</script>

這種情況下iScroll會在頁面資源（包括圖片）加載完畢100ms之後得到初始化，這應該是一種比較安全的調用iScroll的方式。

inline初始化

這種情況會在頁面加載到js的時候就進行調用，此方法不推薦使用，但是很多javascript的大牛都在用這種方式，我又 有什麽理由不贊成呢？

	<script src="iscroll.js"></script>
	<div id="wrapper">
		<ul>
			<li></li>
			.....
		</ul>
	</div> 
	<script>
		var myscroll=new iScroll("wrapper");
	</script>

不過建議你使用一些框架的ready方法來安全調用iScroll（比如jquery裏的ready()）。

iScroll 參數

iScroll裏的第一個參數很簡單就是外容器的id，或者css語法格式的class，如‘.home .scroll‘。

第二個參數允許你自定義一些屬性配置和方法，比如下面的這段代碼：

	<script>
		var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});
	</script>

第二個參數通常都是一個對象，像上面的這個例子裏就設定了不顯示滾動條。所有參數如下（*號為常見參數）：

基本參數

參數名	說明	可選值	默認值
hScroll *	是否允許水平滾動	false 否 true 是	true
vScroll *	是否允許垂直滾動	false 否 true 是	true
bounce *	是否超過實際位置反彈	false 否 true 是	true
bounceLock	當內容少於滾動是否可以反彈	false 否 true 是	false
momentum*	是否開啟拖動慣性	false 否 true 是	true
lockDirection	當水平或垂直拖動時是否鎖定另一邊的拖動	false 否 true 是	true
useTransform	是否使用CSS變形	false 否 true 是	true
useTransition	是否使用CSS變換	false 否 true 是	false
checkDOMChanges	是否自動檢測內容變化	false 否 true 是	false
topOffset	已經滾動的基準值(一般用在拖動刷新)	數字值	0
x	滾動水平初始位置（負值）	數字值	0
y	滾動垂直初始位置（負值）	數字值	0

Scrollbar 的相關參數

參數名	說明	可選值	默認值
hScrollbar *	是否顯示水平滾動條	false否 true 是	true
vScrollbar *	是否顯示垂直滾動條	false否 true 是	true
fixedScrollbar	在iOS系統上，當元素拖動超出了scroller的邊界時，滾動條會收縮，設置為true可以禁止滾動條超出scroller的可見區域。	false否 true 是	默認在Android上為true， iOS上為false
hideScrollbar	是否隱藏滾動條	false否 true 是	默認在Android上為false， iOS上為true
fadeScrollbar	滾動條是否漸隱漸顯	false否 true 是	默認在Android上為false， iOS上為true
scrollbarClass *	字定義滾動條的樣式名	自定義class	‘‘

Zoom 放大相關的參數

參數名	說明	可選值	默認值
zoom	是否放大	false 否 true 是	false
zoomMin	放大的最小倍數	數字值	1
zoomMax	放大的最大倍數	數字值	4
doubleTapZoom	雙擊放大倍數	數字值	2
wheelAction	鼠標滾動行為（還可以是zoom）	none 不支持 ‘scroll‘ 鼠標滾動 ‘zoom‘ 鼠標縮放	‘scroll‘

snap 捕捉元素相關的參數

參數名	說明	可選值	默認值
snap	是否開啟捕捉元素，snap值可以為true 或是 DOM元素的tagname，當為true 時，捕捉的元素會根據可滾動的位置和滾動區域計算得到可滑動幾頁。如果為tagname,則滑動會對齊到捕捉的元素上。	false 否 true 是< DOM元素的tagname	false
snapThreshold	滑動的長度限制，只有大於這個距離才會觸發捕捉元素事件	數字值	1

自定義 Events 的相關參數

參數名	說明	可選值	默認值
onBeforeScrollStart	開始滾動前的事件回調 默認是阻止瀏覽器默認行為	null 不設置 Function 自定義函數	function (e) { e.preventDefault(); }
onRefresh	refresh 的回調		null
onScrollStart	開始滾動的回調
onBeforeScrollMove	在內容移動前的回調
onScrollMove	內容移動的回調
onBeforeScrollEnd	在滾動結束前的回調
onScrollEnd	在滾動完成後的回調
onTouchEnd	手離開屏幕後的回調
onDestroy	銷毀實例的回調
onZoomStart	放大開始時的回調
onZoom	放大的回調
onZoomEnd	放大結束後的回調

iScroll 方法API

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

拉動刷新

說明

自從Twitter和一些Apple的本地化應用出現了這個效果之後，這個效果就變得非常流行，你可以點擊這裏（需要FQ）看看視頻先一睹為快，也可以點擊這裏試試拉動刷新是如何工作的。

實現原理

1. 通過 topOffset 參數屬性設置iScroll已經滾動的基準值；
2. 通過 onScrollMove 參數方法判斷當前滾動是到頂端還是底端；
3. 通過 onScrollEnd 參數方法觸發加載新數據，再通過 refresh 方法重新渲染界面；
4. 通過 onRefresh 參數方法調整刷新後的界面結構；

	<script>
		var myScroll =new iScroll("wrapper",{
			topOffset: 50,
			onRefresh: function(){...},
			onScrollMove: function(){...},
			onScrollEnd: function()...{}
		});
	</script>

具體的實現代碼可以查看這裏的源文件；

縮放

我們不得不面對一個事實，那就是光有滾動其實沒什麽新意的。這就是為什麽在iScroll 4這個版本裏我們允許你可以放 大和縮小。想要這個功能，只需要設置放大的參數zoom 為true即可實現利用手勢來放大和縮小。你可以看看這兒。

雙擊放大和縮小的功能在iScroll 4裏也是得到支持的。要使用縮放功能，你至少需要如下配置：

	<script>
		var myScroll =new iScroll("wrapper",{zoom:true});
	</script>

如果你想對縮放功能進行深度的自定義的話可以使用下面的一些選項：

參數名	說明
zoomMax	指定允許放大的最大倍數，默認為4

【註意事項】： 如果想要圖片縮放的效果很好的話要把他們放到硬件的合成層中。通俗點說，就是在所有需要縮放的img元素上使用-webkit-transform:translate3d(0,0,0)來實現，而且尤為重要的是，硬件的加速會占用大量資源，要謹慎使用，否則你的應用可能就此崩潰。

捕捉元素

捕捉的功能會促使scroller去重新定義位置，這樣可以制作更加花哨的傳送帶效果。點擊這裏有個小例子。

默認情況下，iScroll將scroller分成四分體，或者是相同大小的wrapper。iScroll 4加入了這個屬性允許捕捉scroller裏的任何元素，不考慮外部wrapper的大小。如果你想要實現這樣的傳送帶效果，我建議你使用“quadrant”分割。最佳的設置如下：

	<script>
		var myscroll=new iScroll("wrapper",{
			snap:true, 
			momentum:false, 
			hScrollbar:false, 
			vScrollbar: false
		});
	</script>

捕獲元素，可以通過傳遞一個字符串來作為查詢條件，如下：

	<script>
		var myscroll=new iScroll("wrapper",{
			snap:"li", 
			momentum:false, 
			hScrollbar:false, 
			vScrollbar: false
		});
	</script>

在這個例子中scroller可以捕捉到滾動區域中最左上角的li元素

自定義滾動條

在iScroll 4這個版本中，可以利用一系列的css來自定義滾動條的呈現。可以給滾動條添加一個class參數，如下：

	<script>
		var myscroll=new iScroll("wrapper",{
			scrollbarClass: "myScrollbar"
		});
	</script>

你可以點擊這裏看一個小例子，在這個小例子裏，myScrollbarH這個類被添加到了水平滾動條上，myScrollbarV這個類則被添加給了垂直方向上的滾動條上了。需要提醒的是，滾動條是由兩個元素組合而成的：容器和顯示器。容器同wrapper的高度相同，而顯示器則代表的是滾動條本身。

滾動條的HTML結構如下：

	<div class="myScrollbarV">
		<div></div>
	</div>

	.myscrollbarV{
		position:absolute;z-index:100;width:8px;bottom:7px;top:2px;right:1px;
	}

	.myScrollbarV > div {
		position:absolute;
		z-index:100;
		width:100%;
		/* The following is probably what you want to customize */
		background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
		border:1px solid #800;
		-webkit-background-clip:padding-box;
		-webkit-box-sizing:border-box;
		-webkit-border-radius:4px;
		-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
	}

iScroll 4.2.5 中文API