IScroll介紹--案例

 

一、下面簡單介紹一下iScroll:

iScroll是一個高性能，資源占用少，無依賴，多平台的javascript滾動插件。

 

它可以在桌面，移動設備和智能電視平台上工作。它一直在大力優化性能和文件大小以便在新舊設備上提供最順暢的體驗。

 

iScroll不僅僅是 滾動。它可以處理任何需要與用戶進行移動交互的元素。在你的項目中包含僅僅4kb大小的iScroll，你的項目便擁有了滾動，縮放，平移，無限滾動，視差滾動，旋轉功能。給它一個掃帚它甚至能幫你打掃辦公室。

 

即使平台本身提供的滾動已經很不錯，iScroll可以在此基礎上提供更多不可思議的功能。具體來說：

 

• 細粒度控制滾動位置，甚至在滾動過程中。你總是可以獲取和設置滾動器的x，y坐標。
• 動畫可以使用用戶自定義的擦出功能（反彈'bounce'，彈性'elastic'，回退'back'，...）。
• 你可以很容易的掛靠大量的自定義事件（onBeforeScrollStart, *
• 開箱即用的多平台支持。從很老的安卓設備到最新的iPhone，從Chrome瀏覽器到IE瀏覽器。

　　官網：http://iscrolljs.com/

 

下面是一些屬性：

　　　　使用它我們需要去下載<script src="iscroll.js"></script>這個插件，引入它才會有效果

設置列表：

所屬	屬性名	說明	默認值
核心庫 croe	options.useTransform	是否使用CSS3的Transform屬性	true
	options.useTransition	是否使用CSS3的Transition屬性，否則使用requestAnimationFram代替	true
	options.HWCompositing	是否啟用硬件加速	true
	options.bounce	是否啟用彈力動畫效果，關掉可以加速	true
基礎特性 Basic features	options.click	是否啟用click事件。建議關閉此選項並啟用自定義的tap事件（options.tap）	false
	options.disableMouse	是否關閉鼠標事件探測。如知道運行在哪個平台，可以開啟它來加速。	false
	options.disablePointer	是否關閉指針事件探測。如知道運行在哪個平台，可以開啟它來加速。	false
	options.disableTouch	是否關閉觸摸事件探測。如知道運行在哪個平台，可以開啟它來加速。	false
	options.eventPassthrough	使用IScroll的橫軸滾動時，如想使用系統立軸滾動並在橫軸上生效，請開啟。 event passthrough demo	false
	options.freeScroll	主要在上下左右滾動都生效時使用，可以向任意方向滾動。 2D scroll demo	false
	options.keyBindings	綁定按鍵事件。 Key bindings	false
	options.invertWheelDirection	反向鼠標滾輪。	false
	options.momentum	是否開啟動量動畫，關閉可以提升效率。	true
	options.mouseWheel	是否監聽鼠標滾輪事件。	false
	options.preventDefault	是否屏蔽默認事件。	true
	options.scrollbars	是否顯示默認滾動條	false
	options.scrollX options.scrollY	可以設置是否顯示橫向或縱向滾動條	scrollX false scrollY true
	options.tap	是否啟用自定義的tap事件 可以自定義tap事件名	false
滾動條 Scrollbars	options.scrollbars	是否顯示默認滾動條	false
	options.fadeScrollbars	是否漸隱滾動條，關掉可以加速	true
	options.interactiveScrollbars	用戶是否可以拖動滾動條	false
	options.resizeScrollbars	是否固定滾動條大小，建議自定義滾動條時可開啟。	false
	options.shrinkScrollbars	滾動超出滾動邊界時，是否收縮滾動條。 ‘clip'：裁剪超出的滾動條 ‘scale':按比例的收縮滾動條（占用CPU資源） false:不收縮，	false
	options.indicators	指示IScroll該如何滾動，Scrollbars的底層實現方式。
	options.indicators.el	制定滾動條的容器。容器中的第一個元素即為指示器。 例如： indicators: { el: document.getElementById('indicator') } indicators: { el: '#indicator' }
	options.indicators.ignoreBoundaries	是否忽略容器邊界。設為true 可以設置滾動速度 parallax demo	false
	options.indicators.listenX options.indicators.listenY	指示器監聽那個方向的滾動，可以設置為一個方向或2個方向	true
	options.indicators.speedRatioX options.indicators.speedRatioY	指示器相對主滾動條的速度	0
	options.indicators.fade options.indicators.interactive options.indicators.resize options.indicators.shrink	如scrollbars的設置 minimap demo
	options.probeType	需要使用iscroll-probe.js才能生效 probeType：1 滾動不繁忙的時候觸發 probeType：2 滾動時每隔一定時間觸發 probeType：3 每滾動一像素觸發一次
分割頁面snap	options.snap	自動分割容器，用於制作走馬燈效果等。 Options.snap:true//根據容器尺寸自動分割 Options.snap:el//根據元素分割	false
縮放 zoom	options.zoom	是否打開縮放 最好使用iscroll-zoom.js 如放大模糊，可將源容器定義為2倍大小，然后scale(0.5) zoom demo	false
	options.zoomMax	最大縮放等級	4
	options.zoomMin	最小縮放等級	1
	options.startZoom	初始縮放等級	1
	options.wheelAction	滾輪動作 設為'zoom'，可以用滾輪縮放	undefined
更多設置	options.bindToWrapper	光標、觸摸超出容器時，是否停止滾動	false
	options.bounceEasing	彈力動畫效果 預置效果：'quadratic', 'circular', 'back', 'bounce', 'elastic'（最后兩個不能通過css3表現） 還可以自定義效果 bounceEasing: { style: 'cubic-bezier(0,0,1,1)',//css3時 fn: function (k) { return k; }//不使用css3，使用requestAnimationFrame時 }	'circular'
	options.bounceTime	彈力動畫持續的毫秒數	600
	options.deceleration	滾動動量減速 越大越快，建議不大於0.01	0.0006
	options.mouseWheelSpeed	鼠標滾輪速度
	options.preventDefaultException	列出哪些元素不屏蔽默認事件；	{tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }
	options.resizePolling	重新調整窗口大小時，重新計算IScroll的時間間隔	60
鍵位綁定	options.keyBindings	監聽按鍵事件控制IScroll 例如： keyBindings: { pageUp: 33, pageDown: 34, end: 35, home: 36, left: 37, up: 38, right: 39, down: 40 }

IScroll5的API：

所屬	方法名	說明
滾動	scrollTo(x, y, time, easing)	滾動到：x，y，事件，easing方式 x:int y:int time:int Easing: quadratic | circular | back | bounce | elastic 見IScroll.utils.ease 對象 例： myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);
	scrollBy(x, y, time, easing)	滾動到相對於當前位置的某處 其余同上
	scrollToElement(el, time, offsetX, offsetY, easing)	滾動到某個元素。el為必須的參數 offsetX/offsetY：相對於el元素的位移。設為true即為屏幕中心 scroll to element
分割頁面snap	goToPage(x, y, time, easing)	根據options.snap分割頁面，跳轉到橫向、縱向某頁。XY可以同時生效。 結合options.snap使用
	next() prev()	上一頁，下一頁 結合options.snap使用
縮放	zoom(scale, x, y, time)	縮放容器 Scale:縮放因子
刷新	refresh()	刷新IScroll
銷毀	destroy()	銷毀IScroll，節省資源

IScroll的事件：

beforeScrollStart	用戶點擊屏幕，但是還未初始化滾動前
scrollCancel	初始化滾動后又取消
scrollStart	開始滾動
scroll	滾動中
scrollEnd	滾動結束
flick	輕擊屏幕左、右
zoomStart	開始縮放
zoomEnd	縮放結束

事件使用實例：

?

1 2	myScroll = new IScroll('#wrapper'); myScroll.on('scrollEnd', doSomething);

IScroll的屬性：

myScroll.x/y	當前位置
myScroll.directionX/Y	上一次的滾動方向(-1 下/右, 0 保持原狀, 1 上/左)
myScroll.currentPage	當前Snap信息
myScroll.maxScrollXmyScroll.maxScrollY	當滾動到底部時的 myScroll.x/y

一個簡單的實例：

　　　　首先需要引入插件     <script src="iscroll.js"></script>

　　　　　　　　　　　　　　　　　　html:

<div id="wrapper">

 <ul>

 <li>...</li>

 <li>...</li>

 ...

 </ul>

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 </div>

　　　　　　　　　　　　　　　　　　css:

　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　div{
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　width: 50%;
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　height: 500px;
　　　　　　　　　　　　　　　　　　　　　　　　　　　　       overflow: hidden;
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　position: absolute;//必須要加定位
　　　　　　　　　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　　　　　　　　　　　　　注意的是div里面的內容要大於div的高度才會出現滾動條，下面的樣式就靠你自己設置了；

　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　js:

var myScroll = new IScroll('div', {

 mouseWheel: true,

 scrollbars: true

//還有其他的屬性，可以根據上面給的文檔進行填寫；

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}); 

二、在這里還有一個小案例，通過用iScroll寫一個下拉刷新

                       這個案例需要引入<script src="iscroll-probe.js"></script>插件

　　　　　　　　　　　　　　　　css:

<style type="text/css">
	div{
	width: 300px;
	height: 100px;
	border: 1px solid #CCC;
	overflow: hidden;
	position: absolute;
	}
	ul{
	width: 400px;
	}
	li{
	line-height: 30px;
	}
	#shows{
	display: none;
	}
	</style>

　　　　　　　　　　　　　　css:

　　　　　　　　　　　　html:

　　　　　　　　　　　　　　　　

<div>
	<ul>
	<li id="shows">刷新</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>7</li>
	<li>7</li>
	</ul>
	</div>

　　　　　　　　　　　　　　js:

　　　　　　　　　　　　　　　　

<script src="jquery-2.1.4.min.js"></script>
	<script src="iscroll-probe.js"></script>
	<script>
	var a=new IScroll("div",{
	probeType:3,
	scrollX:true,
	interactiveScrollbars:true,
	})
	a.on("scroll",function(){
	if(this.y>40){
	$("#shows").show();
	}
	})
	a.on("scrollEnd",function(){
	$("#shows").hide()
	})
	</script>