JavaScript内容滚动 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #maxBox{
                position: absolute;
                
                overflow: hidden;
                width: 100%;
                height: 30%;
            }
            li{
                height: 15vw;
                text-align: center;
                line-height: 15vw;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div id="maxBox">
            <ul>
                <li>main1</li>
                <li>main2</li>
                <li>main3</li>
                <li>main4</li>
                <li>main5</li>
                <li>main6</li>
                <li>main7</li>
                <li>main8</li>
                <li>main9</li>
                <li>main10</li>
                <li>main11</li>
                <li>main12</li>
                <li>main13</li>
                <li>main14</li>
                <li>main15</li>
            </ul>
        </div>
    </body>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/iscroll.js"></script>
    <script>
        myScroll = new iScroll(document.getElementById('maxBox'), {
            mouseWheel: true,
            scrollbars: false,
            vScrollbar: false,
            fixedScrollbar: false
        });
    </script>
</html>

基于jquery和iscroll.js插件

iscroll.js下载地址：

posted @ 2020-08-07 11:44  Mr▪小zhou  阅读(95)  评论(0)  编辑  收藏  举报