webapp利用iscroll实现同时横滚|竖滚

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>横滚|竖滚</title>
<script type="text/javascript" src="http://cubiq.org/dropbox/iscroll4/src/iscroll.js"></script>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
var myScroll;
var myScroll1, myScroll2, myScroll3;

function loaded() {
    var width = $(window).width();
    $('#wrapper,#div1,#div2,#div3').width(width);
    $('#scroller').width(width*3);
    $('#div1,#div2,#div3').height(($('#wrapper').height()));

    myScroll = new iScroll('wrapper', {
        hScrollbar: false,
        vScrollbar: false,
        snap: true,
        momentum: false,
        hScrollbar: false,
        onScrollEnd: function () {
            $('#nav li.active').removeClass('active');
            $('#nav li:eq('+this.currPageX+')').addClass('active');
        }
     });

    myScroll1 = new iScroll('div1', {hScrollbar: false,vScrollbar: false});
    myScroll2 = new iScroll('div2', {hScrollbar: false,vScrollbar: false});
    myScroll3 = new iScroll('div3', {hScrollbar: false,vScrollbar: false});
}
$(function(){
    $('#nav li').click(function(){
        myScroll.scrollToPage($(this).index());
    });
});
document.addEventListener('DOMContentLoaded', loaded, false);
</script>

<style type="text/css" media="all">
body,ul,li {
    padding:0;
    margin:0;
}

#wrapper {
    position: absolute;
    z-index: 1;
    top: 52px;
    bottom: 0px;
    left: 0;
    width: 100%;
    overflow: hidden;
}

#scroller {
    position:absolute;
    z-index:1;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    width:100%;
    padding:0;
}

#div1, #div2, #div3{
    float:left;
    height:100%;
}

#nav li{
    float:left;
    list-style-type:none;
    padding:0 20px;
}
#nav li.active{
    background-color:red
}
</style>
</head>
<body>
<ul id="nav">
    <li class="active">tab111111</li>
    <li>tab222222</li>
    <li>tab333333</li>
</ul>
<div id="wrapper">
    <div id="scroller">
        <div id="div1">
        <div id="scroller1">
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>1111111111111111111111111111</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
        </div>
        </div>

        <div id="div2">
        <div id="scroller1">
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>2222222222222222222222222222</p>
        <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>
        <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>
        <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>
        <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>
        <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>
        <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>
        <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>
        <p>bbbbbbbbbbbbbbbbbbbbbbbb</p>
        </div>
        </div>

        <div id="div3">
        <div id="scroller1">
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>3333333333333333333333333333</p>
        <p>cccccccccccccccccccccccc</p>
        <p>cccccccccccccccccccccccc</p>
        <p>cccccccccccccccccccccccc</p>
        <p>cccccccccccccccccccccccc</p>
        <p>cccccccccccccccccccccccc</p>
        <p>cccccccccccccccccccccccc</p>
        <p>cccccccccccccccccccccccc</p>
        <p>cccccccccccccccccccccccc</p>
        </div>
        </div>
    </div>
</div>
</body>
</html>