iscroll5 使用说明

电玩女神 2022-08-09 14:56 8阅读 0赞

# iscroll5 使用说明 #

今天使用了一下iscroll5的例子。做了一个侧滑的webapp demo。

> **html结构**

<div id="wrapper">
        <div id="scroller">
            这里是内容，scroller的高度一定高于wrapper的高度。wrapper为滚动区域，scroller为滚动的内容。
        </div>
    </div>

> **css样式**

#wrapper {
        position: absolute;
        z-index: 1;
        top: 45px;
        bottom: 48px;
        left: 0;
        width: 100%;
        background: #ccc;
        overflow: hidden;
    }
    
    #scroller {
        position: absolute;
        z-index: 1;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        width: 100%;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -o-text-size-adjust: none;
        text-size-adjust: none;
    }

> **javascript 调用**

var myScroll;
    
    function loaded () {
        myScroll = new IScroll('#wrapper', {
            scrollbars: true,
            mouseWheel: true,
            interactiveScrollbars: true,
            shrinkScrollbars: 'scale',
            fadeScrollbars: true
        });
    }
    
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

参考资料  
[官网][Link 1]  
[这里有放在github上的例子][github]  
[iscroll4api说明][iscroll4api]

[Link 1]: http://iscrolljs.com
[github]: https://github.com/cubiq/iscroll
[iscroll4api]: http://www.360doc.com/content/14/0724/11/16276861_396699901.shtml