iScroll 4 - 用 JS 實現手機上的捲軸 iScroll, scroller

wmh

iScroll 4
http://cubiq.org/iscroll-4
用 JS 實現手機上的捲軸

消失的捲軸

手機版的 webkit 在 overflow: scroll 時，並不會顯示捲軸 (iOS 5 以前)，沒有特別說明的話，使用者還真的不知道那一塊內容是可以捲動的呢。現在透過 iScroll 4 可以用 JavaScript 來模擬出手機上原生的捲動效果囉。

下載

• 壓縮檔連結：https://github.com/cubiq/iscroll/zipball/master
  
• 原始碼(github)：https://github.com/cubiq/iscroll
  

使用

HTML 的部份是這樣的：

view plaincopy to clipboardprint?

1. <div id="wrapper">  
2.         <ul>  
3.                 <li></li>  
4.                 ...  
5.                 ...  
6.         </ul>  
7. </div>  

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

其中 #wrapper 是捲動的區域(範圍)，底下的第一個元素 ul 是捲動的內容。

程式的部份如下：

view plaincopy to clipboardprint?

1. function loaded() {  
2.         myScroll = new iScroll('wrapper');  
3. }  
4. document.addEventListener('DOMContentLoaded', loaded);  

function loaded() {
        myScroll = new iScroll('wrapper');
}
document.addEventListener('DOMContentLoaded', loaded);

在 DOMContentLoaded 的事件內，new 一個 iScroll 物件，帶入該元素的 id 即可。

如果你用 jQuery，也可以這樣做：

view plaincopy to clipboardprint?

1. $(function () {  
2.         myScroll = new iScroll('wrapper');  
3. });  

$(function () {
        myScroll = new iScroll('wrapper');
});

範例

直接玩玩看下面的捲動效果吧～～

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
•