<!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下载地址：