返回列表 發帖

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

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

消失的捲軸

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

下載



使用

HTML 的部份是這樣的:
<div id="wrapper">
        <ul>
                <li></li>
                ...
                ...
        </ul>
</div>
其中 #wrapper 是捲動的區域(範圍),底下的第一個元素 ul 是捲動的內容。

程式的部份如下:
function loaded() {
        myScroll = new iScroll('wrapper');
}
document.addEventListener('DOMContentLoaded', loaded);
在 DOMContentLoaded 的事件內,new 一個 iScroll 物件,帶入該元素的 id 即可。

如果你用 jQuery,也可以這樣做:
$(function () {
        myScroll = new iScroll('wrapper');
});
範例

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

To infinity and beyond!

返回列表 回復 發帖