iScroll.js 用法參考 （share）
分享是傳播、學習知識最好的方法javascript
如下這篇文章是iScroll.js官網的中文翻譯，儘管本身英文很差，但以爲原做者們翻譯的這個資料仍是能夠的，基本用法介紹清楚了。若是你英文比較好的話，能夠看看官網的資料。css
參考：http://www.cnblogs.com/asqq/archive/2012/04/23/2466132.html ， http://www.nb88.net/Index/p/id/406html
官網：http://cubiq.org/iscroll-4java
概要
iScroll 4 這個版本徹底重寫了iScroll這個框架的原始代碼。這個項目的產生徹底是由於移動版webkit瀏覽器（諸如iPhone，iPad，Android 這些系統上普遍使用）
提供了一種本地化的方式來對一個限定了高度和寬度的元素的內容進行滑動。很不幸的是，這種狀況下全部的web應用的頁面就不可以包含具備position:absolute的頭、頁尾或者是一個內容可滾動的
中間區域。
然而，Android系統最新修訂版已經能夠支持這種功能了（儘管支持的力度還不是特別好），Apple公司彷佛不太情願將one-finger滑動事件運用到div元素上。
除了之前版本的iScroll的特性之外，iScroll 4還包括以下的特性：
（1）縮放（Pinch/Zoom）
（2）拉動刷新（Pull up/down to refresh）
（3）速度和性能提高
（4）精確捕捉元素
（5）自定義滾動條
友情提示：iScroll 4並非iScroll 3的簡易替代版本，API文檔已經不同了。同時考慮到此版本正處於測試期，一些API可能會有細微的變化。jquery
使用指南web
在此文檔中你會發現不少例子來教會你如何快速上手iScroll腳本庫。參看文中的demo小例子並仔細閱讀此文檔，可能有點小無聊，可是這篇文章中倒是iScroll這個腳本庫的精髓之所在哦。
iScroll須要對所要進行滾動的元素進行初始化，而且不限定一個頁面中使用iScroll的元素的個數（這裏不考慮您的硬件配置）。滾動元素中內容的類型和長度在必定程度上將會影響iScroll腳本庫裏
能夠同時使用的元素的個數。
使用iScroll這個腳本庫時，DOM樹的結構要足夠簡單，移除沒必要要的標籤，儘可能避免過多的標籤嵌套使用。
最優的使用iScroll的結構以下所示：
ajax
<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進行實例化：
網絡
（1）使用onDOMContentLoaded事件實現滾動
適用於滾動內容只包含文字、圖片，而且全部的圖片都有固定的尺寸
<script src="iscroll.js"></script>
<script>
var myscroll;
function loaded(){
myscroll=new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded",loaded,false);
</script>
注意：myscroll這個變量是全局的，所以你能夠在任何地方調用它
（2）使用onLoad事件實現滾動
由於DOMContentLoaded事件是載入DOM結構後就會被調用，因此在圖片等元素未載入前可能沒法肯定滾動區域的長寬，此時可使用onLoad事件來實現。
<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的方式。
（3）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裏的第二個參數容許你自定義一些內容，好比下面的這段代碼：
<script>
var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});
</script>
第二個參數一般都是一個對象，像上面的這個例子裏就設定了不顯示滾動條。經常使用的參數以下：
hScroll false 禁止橫向滾動 true橫向滾動 默認爲true
vScroll false 精緻垂直滾動 true垂直滾動 默認爲true
hScrollbar false隱藏水平方向上的滾動條
vScrollbar false 隱藏垂直方向上的滾動條
fixedScrollbar 在iOS系統上，當元素拖動超出了scroller的邊界時，滾動條會收縮，設置爲true能夠禁止滾動條超出
scroller的可見區域。默認在Android上爲true， iOS上爲false
fadeScrollbar false 指定在無漸隱效果時隱藏滾動條
hideScrollbar 在沒有用戶交互時隱藏滾動條 默認爲true
bounce 啓用或禁用邊界的反彈，默認爲true
momentum 啓用或禁用慣性，默認爲true，此參數在你想要保存資源的時候很是有用
lockDirection false取消拖動方向的鎖定， true拖動只能在一個方向上（up/down 或者left/right）
各類效果的實現
滾動刷新 'Pull to refresh' demo
自從Twitter和一些Apple的本地化應用出現了這個效果以後，這個效果就變得很是流行。你能夠看看這兒先一睹爲快。
最新版中，做者把把"pull to refresh"這個部分單分出來做爲iScroll的一個額外插件。你能夠點擊這兒看看pull to refresh是如何工做滴。你只須要作的就是自定義pullDownAction()這個方法。你可能須要一個ajax來加載新的內容，不過一旦DOM樹發生了變化要記得調用refresh這個方法來。須要記住的是在例子中咱們加了1秒的延遲來模擬網絡的延遲效果。固然，若是你不想使用這個延遲，那就把setTimeout方法去掉就好了。
縮放(pinch / zoom) 'Pull to refresh' demo
咱們不得不面對一個事實，那就是光有滾動其實沒什麼新意的。這就是爲何在iScroll 4這個版本里咱們容許你能夠放
大和縮小。想要這個功能，只須要設置放大的參數zoom 爲true便可實現利用手勢來放大和縮小。你能夠看看這兒。
雙擊放大和縮小的功能在iScroll 4裏也是獲得支持的。要使用縮放功能，你至少須要以下配置：
var myScroll =new iScroll("wrapper",{zoom:true});
若是你想對縮放功能進行深度的自定義的話可使用下面的一些選項：
zoomMax 指定容許放大的最大倍數，默認爲4
【注意事項】：若是想要圖片縮放的效果很好的話要把他們放到硬件的合成層中。通俗點說，就是在全部須要縮放的img元素上使用-webkit-transform:translate3d(0,0,0)來實現，並且尤其重要的是，硬件的加速會佔用大量資源，要謹慎使用，不然你的應用可能就此崩潰。
捕捉元素（snap and snap to element） 'Carousel' demo
SNAP功能是判斷元素是否滑動到指定位置。經過這個效果能夠製做花哨的跑馬燈效果。
插件會自動分析滾動區域內相同標籤或相同大小的元素作爲捕捉對象，也能夠經過參數指定捕捉的對象
var myscroll=new iScroll("wrapper",{
snap:true,
momentum:false,
hScrollbar:false,
vScrollbar: false
});
能夠經過設置snap參數爲指定標籤來設定捕捉對象。好比捕捉li標籤。
var myscroll=new iScroll("wrapper",{
snap:"li",
momentum:false,
hScrollbar:false,
vScrollbar:false
});
在這個例子中scroller能夠捕捉到滾動區域中最左上角的li元素
自定義滾動條（custom scrollbars）
在iScroll 4這個版本中，能夠利用一系列的css來自定義滾動條的呈現。能夠給滾動條添加一個class參數，以下：
var myscroll=new iScroll("wrapper",{
scrollbarClass: "myScrollbar"
});
須要提醒的是，滾動條是由兩個元素組合而成的：容器和顯示器。容器同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);
}
通用方法：
（1）refresh 在DOM樹發生變化時，應該調用此方法
eg: setTimeout(function () { myScroll.refresh(); }, 0);
（2）iScroll還提供了scrollTo, scrollToElement和scrollToPage三個方法讓你可以經過javascript來控制滾動效果。
scrollTo(x, y, time, relative)：在指定的time時間內讓內容滾動條x/y的位置。如myScroll.scrollTo(0, -100, 200) 在200毫秒內Y軸向下滾動100像素。 myScroll.scrollTo(0, 10, 200, true)能夠實現相對當前位置在200毫秒內Y軸向上滾動10像素的效果。
scrollToElement(element, time)：在指定的時間內滾動到指定的元素。如myScroll.scrollToElement('li:nth-child(10)', 100) 在100毫秒內滾動到第10個li元素的位置。第1個參數能夠用CSS3中的選擇器來篩選元素。
snapToPage(pageX, pageY, time)：在200毫秒內從第1頁滾動到第2頁（0表明第1頁，1表明第2頁）。這個使用SNAP功能的時候能夠調用這個函數。
（3）detroy() 徹底消除myscroll及其佔用的內存空間
eg: myscroll.destroy();
myScroll = null;
iScroll的發展方向
- 表單域的支持
- 縮放的優化
- 更好的桌面瀏覽器的兼容性
- onScrol事件的優化
- 加個哈希值的變化
- DOM改變後自動刷新