HTML5應用開發：JavaScript庫iScroll教程

目錄javascript

1. iScroll介紹css

2. 安裝和使用html

3. 簡單的iScroll例子java

4. Pinch & Zoomios

5. Snap to elementcss3

6. iScroll 詳細參數git

1. iScroll介紹github

通常咱們在開發傳統Web網站時，偶爾會用固定某一區域的寬度/高，而後借用設置這一區域的overflow:scroll，使得其裏面超過該區域範圍的內容，能夠經過移動滾動條來查看。web

而在iOS(iOS5如下)的mobile Safari以及Android的瀏覽器當中，原生不支持頁面內任意區域的overflow:scroll這個屬性。傳統的作法是使用絕對定位的Header以及Footer，而後讓整個頁面內容能夠滾動。iScroll的出現，也是用Javascript來模擬CSS的overflow:scroll屬性，解決頁面內元素的滾動問題。api

因爲iScroll自己使用了transform3d的屬性來模擬滾動效果，使得它性能上也很是不錯，由於這個屬性能使用平臺提供的硬件加速。在實際使用當中，效果平滑流暢，能夠與原生的相媲美。

本文示例代碼能夠從GitHub下載，地址：https://github.com/cubiq/iscroll。

2. 安裝和使用

iScroll的安裝很是簡單，你只須要從Github下載最新版本，iScroll是一個純JS庫，所以你能夠像使用其餘JS腳本同樣用script標籤來包含iScroll.js, 其並不依賴於jQuery或者其餘的庫文件：

3. 簡單的iScroll例子

本例中，將一步一步地一個經過iScroll模板來實現一個Native App樣式的List View。

第一步，在HTML網頁中，添加iScroll.js

第二步，在頁面加載完成以後，實例化iScroll，loaded函數，典型代碼以下：

 
      1 
      <script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper', { checkDOMChanges: true }); } document.addEventListener('DOMContentLoaded', loaded, false); </script>

myScroll是一個全局變量，你能夠在任何地方使用scroller函數。當DOMContentLoaded觸發以後即加載load函數，可是有的時候因爲DOM加載須要一段時間，同時加載iScroll的內容可能會致使頁面異常，能夠爲load函數添加一個settimeout，代碼以下：

 
      1 
      <script type="application/javascript" src="iscroll.js"></script> <script type="text/javascript"> var myScroll; function loaded() { setTimeout(function () { myScroll = new iScroll('wrapper'); }, 100); } window.addEventListener('load', loaded, false); </script>

第三步，添加HTML元素，本例中，元素包括header，footer，和wrapper(List滾動區域)，代碼以下：

[xhtml]<div id="header">iScroll</div> <div id="wrapper"> <div id="scroller"> <ul id="thelist"> <li>Pretty row 1</li> <li>Pretty row 2</li> <li>Pretty row 3</li> <li>Pretty row 4</li> <li>Pretty row 5</li> <li>Pretty row 6</li> <li>Pretty row 7</li> </ul> </div> </div> <div id="footer"></div>[/xhtml]

#wrapper是顯示的窗口，# scroller是包含全部list的集合，通常來講scroller比wrapper要大，scroller在wapper中滾動，只有在wapper中的元素才被顯示出來。默認狀況下，iScroller只會滾動在#wrapper下的第一個元素，若是你有多個元素都須要滾動，請按照下列方式填寫：

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

第四步，添加樣式表CSS：

咱們須要header和footer固定，因此他們的樣式以下：

[xhtml]#header { position:absolute; z-index:2; top:0; left:0; width:100%; height:45px; line-height:45px; background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e)); background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); padding:0; color:#eee; font-size:20px; text-align:center; } #footer { position:absolute; z-index:2; bottom:0; left:0; width:100%; height:48px; background-color:#222; background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222)); background-image:-moz-linear-gradient(top, #999, #666 2%, #222); background-image:-o-linear-gradient(top, #999, #666 2%, #222); padding:0; border-top:1px solid #444; } [/xhtml]

Wrapper區域在header和footer之間，其各元素樣式表以下：

[xhtml]#wrapper { position:absolute; z-index:1; top:45px; bottom:48px; left:0; width:100%; background:#aaa; overflow:auto; } #scroller { position:absolute; z-index:1; /* -webkit-touch-callout:none;*/ -webkit-tap-highlight-color:rgba(0,0,0,0); width:100%; padding:0; } #scroller ul { list-style:none; padding:0; margin:0; width:100%; text-align:left; } #scroller li { padding:0 10px; height:40px; line-height:40px; border-bottom:1px solid #ccc; border-top:1px solid #fff; font-size:14px; } [/xhtml]

至此，一個完整的listView形式Web App已經完成，能夠在：這裏觀看效果。完整代碼以下：

4. Pinch & Zoom

若是單純的滾動不能知足應用的需求，list元素不只須要能夠滾動，並且能夠進行放大和縮小，iSroll一樣提供了Pinch & Zoom的方式。你所須要作的工做只是在 Scroller聲明的時候添加zoom參數。

var myScroll = new iScroll('wrapper', { zoom: true });

參數zoomMax是指最大容許放大的倍數，默認值是4，用戶能夠自行定義。

若是想要得到更加流暢的圖片放大縮小滾動的效果，推薦使用CSS樣式的硬件加速性能，爲全部會被縮放的圖像添加如下選項：-webkit-transform:translate3d(0,0,0)便可。請注意，使用到硬件加速性能會消耗更多的計算資源，可能致使程序崩潰。

完整demo代碼：

[xhtml]<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>iScroll demo: zoom</title> <script type="application/javascript" src="../../src/iscroll.js"></script> <script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper', { zoom:true }); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); document.addEventListener('DOMContentLoaded', loaded, false); </script> <style type="text/css" media="all"> body,ul,li,p { padding:0; margin:0; border:0; } body { font-size:12px; -webkit-user-select:none; -webkit-text-size-adjust:none; font-family:helvetica; } ...... head and footer css #wrapper { position:absolute; z-index:1; top:45px; bottom:48px; left:0; width:100%; background:#aaa; overflow:auto; } #scroller { position:relative; /* -webkit-touch-callout:none;*/ -webkit-tap-highlight-color:rgba(0,0,0,0); width:640px; padding:0; background:#fff; } p { display:block; width:624px; margin-bottom:1em; padding:8px; font-size:14px; } p img { margin:4px 8px; -webkit-transform:translate3d(0,0,0); } </style> </head> <body> <div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div> <div id="wrapper"> <div id="scroller"> <p><img src="iscroll.jpg" width="100" height="122" alt="iscroll" style="float:left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <p><img src="iscroll.jpg" width="100" height="122" alt="iscroll" style="float:right">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p> </div> </div> <div id="footer"></div> </body> </html>[/xhtml]

5. Snap to element

使用snap選項能夠在固定的位置之間來回滾動list，相似跑馬燈的效果。實現snap效果一樣是在iScroll聲明的時候添加相應參數，代碼以下：

 
      1 
      var myScroll = new iScroll('wrapper', { snap: true, momentum: false, hScrollbar: false, vScrollbar: false });

完整demo代碼：

[xhtml]<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>iScroll demo: Snap to element</title> <script type="text/javascript" src="../../src/iscroll.js"></script> <script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper', { snap: 'li', momentum: false, hScrollbar: false, vScrollbar: false }); } document.addEventListener('DOMContentLoaded', loaded, false); </script> <style type="text/css" media="all"> body,ul,li { padding:0; margin:0; border:0; } body { font-size:12px; -webkit-user-select:none; -webkit-text-size-adjust:none; font-family:helvetica; } #header { position:absolute; top:0; left:0; width:100%; height:45px; line-height:45px; background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e)); background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); padding:0; color:#eee; font-size:20px; text-align:center; } #header a { color:#f3f3f3; text-decoration:none; font-weight:bold; text-shadow:0 -1px 0 rgba(0,0,0,0.5); } #wrapper { position:absolute; z-index:1; top:45px; bottom:0; left:0; width:100%; overflow:auto; background:#eee; } #scroller { width:800px; float:left; padding:0; } #scroller ul { list-style:none; display:block; float:left; width:100%; height:100%; padding:0; margin:0; border:1px solid #aaa; } #scroller li { display:block; float:left; width:78px; height:78px; line-height:78px; text-align:center; border:1px solid #aaa; background:#ccc; } </style> </head> <body> <div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div> <div id="wrapper"> <div id="scroller"> <ul id="thelist"> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> </ul> </div> </div> </body> </html>[/xhtml]

6. iScroll詳細參數：

hScroll, 用來鎖定水平滾動，默認狀況下，水平和垂直滾動都是支持的。若是被設定爲false，則不能水平方向滾動.

vScroll, 用來鎖定垂直滾動

hScrollbar, 水平的滾動條是否顯示選項。.

vScrollbar, 垂直的滾動條是否顯示選項.

bounce, enable/disable 當滾動超出範圍時，是否有彈跳動畫。.

momentum, enable/disable inertia. Default: true. 若是想要節省計算資源，能夠設置爲false.

lockDirection, 當元素在一個方向滾動時(如水平)，另外一個方向(如垂直)的滾動會被鎖定.