滑动插件Iscroll

最新推荐文章于 2022-12-12 15:01:22 发布

凌晨独舞

最新推荐文章于 2022-12-12 15:01:22 发布

阅读量620

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 工具插件文章标签：插件 iscroll5

本文链接：https://blog.youkuaiyun.com/Merciwen/article/details/72960213

Javascript 同时被 3 个专栏收录

72 篇文章

订阅专栏

工具

11 篇文章

订阅专栏

插件

2 篇文章

订阅专栏

本文介绍iScroll组件的基本使用方法，并提供一个简单的示例。此外，还探讨了解决滑动过程中点击导致页面跳转的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iscroll

官网

http://cubiq.org/iscroll-5

简单demo

html

<body onload="loaded()">
    <div id="nav">MaRain导航栏</div>
    <div id="wrapper">
        <div id="scroller"> 
            <ul >
            <li class="item1">列表 001</li>
            <li class="item2">列表 002</li>
            <li class="item3">列表 003</li>
            <li class="item4">列表 004</li>
            <li class="item5">列表 005</li>
            <li class="item6">列表 006</li>
            <li class="item7">列表 007</li>
            <li class="item8">列表 008</li>
            <li class="item9">列表 009</li>
            <li class="item10">列表 010</li>
            <li class="item11">列表 011</li>
            <li class="item12">列表 012</li>
            <li class="item13">列表 013</li>
            <li class="item14">列表 014</li>
            <li class="item15">列表 015</li>
            <li class="item16">列表 016</li>
            <li class="item17">列表 017</li>
            <li class="item18">列表 018</li>
            <li class="item19">列表 019</li>
            <li class="item20">列表 020</li>
            <li class="item21">列表 021</li>
            <li class="item22">列表 022</li>
            <li class="item23">列表 023</li>
            <li class="item24">列表 024</li>
            <li class="item25">列表 025</li>
            <li class="item26">列表 026</li>
            <li class="item27">列表 027</li>
            <li class="item28">列表 028</li>
            <li class="item29">列表 029</li>
            <li class="item30">列表 030</li>
            <li class="item31">列表 031</li>
            <li class="item32">列表 032</li>
        </ul>
    </div>
</div>
<div id="footer">
        底部Copyright &copy; 2017
</div>

css

*{
        padding: 0; 
        margin: 0;
    }
    #nav{
        position: absolute;
        left: 0;
        width: 100%;        
        color: #fff;
        text-align: center;
        line-height: 45px;
        height: 45px;
        font-size: 18px;
        background: #f03;
    }
    #footer{
        position: absolute;
        bottom:0 ;
        width: 100%;        
        color: #fff;
        text-align: center;
        line-height: 45px;
        height: 45px;
        font-size: 18px;
        background: #f03;
    }

    #wrapper{
        position: absolute;
        top: 45px;
        bottom:45px;
        width: 100%;
        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

    <script src="iscroll.js"></script>
    <script>
        var myScroll;
        function loaded () {
            myScroll = new IScroll('#wrapper', { mouseWheel: true, click: true });
        }
    </script>