Fork me on GitHub

iscroll的滑动效果 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
        html,body{width: 100%;height: 100%;overflow:hidden}
        *{ margin: 0;padding: 0 }
        #main{width: 100%;height: 100%;position: relative;}
        #box{width: 700%;height: 100%;position: absolute;  top:0;left: 0;background: yellowgreen}
    </style>
</head>
<body>


<div id="main">
    <div id="box">
        <span>1111111111111111111111111111111111111111</span>
        <span>2222222222222222222222222222222222222222</span>
        <span>3333333333333333333333333333333333333</span>
        <span>44444444444444444444444444444444</span>
        <span>555555555555555555555555555</span>
        <span>666666666666666666666666</span>
        <span>6777777777777777777777777777777</span>
    </div>
</div>

</body>
<script src="iscroll.js"></script>
<script>
    var myScroll;
    function loaded() {
        myScroll = new iScroll('main',{
            bounce:false,//是否超过实际位置反弹
            momentum:true,//是否拖动惯性
            hScrollbar:false,//是否显示水平滚动条
        });

    }
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    document.addEventListener('DOMContentLoaded', loaded, false);
</script>
</html>

 

posted @ 2017-07-03 14:11  小白不白10  阅读(235)  评论(0)    收藏  举报