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