<!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>