关于iscroll.js的快速入门使用，及注意事项
首先下载iscroll.js http://download.csdn.net/download/li841538513/7131123
一、滚动效果
以下代码，除了
background-color:blue;，
background-color:yellow;
这两段代码是我为了让你更好的看到效果写的，其他所有代码都是必须的。
如果你不想看详情的话，行，那就可以直接在class="mainContent"的那个div里面写入你的内容，这里面的内容可以实现滚动效果。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <script src="js/iscroll.js"></script> <title>title</title> </head> <body onload="onload();"> <div id="wrapper" style="width:100%;background-color:blue;position:absolute;top:40px;bottom:40px;overflow:hidden;"> <div class="mainContent" style="width:90%;margin-left:5%;background-color:yellow;"> 3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br> 2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br> 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> </div> </div> </body> <script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper', { useTransform: false, onBeforeScrollStart: function (e) { var target = e.target; while (target.nodeType != 1) target = target.parentNode; if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA' && target.tagName != 'A') e.preventDefault(); } }); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); document.addEventListener('DOMContentLoaded', loaded, false); function onload(){ myScroll.refresh(); } </script> </html>
1、onload()
是为了在页面加载完后，重新刷新myScroll，因为它经常会是页面布局错位，刷新一般就ok了(如果在加载数据之后执行，就可以避免数据很长的情况下，scroll不能正常滑动的情况)
2、onBeforeScrollStart（）
这是因为在iscroll里面的元素，凡事带有input或者其他控件，经常会失去点击效果，加上这个则ok
注意事项：
1、id="wrapper" 的div：
overflow:hidden;
不能设置height
经常position:absolute;
2、class="mainContent"的div
不能设置height
如果你希望你滚动区域是个<ul>，你还希望里面的<li>是可以点击的，那么请用下面这个模板。
注意:这个模板已经完成对touchmove和touchend的冲突的处理（很优秀的模板）
jquery要用1.7以上的版本。详情：http://www.cnblogs.com/MartinLi841538513/articles/3636883.html
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <script src="js/iscroll.js"></script> <script src="js/jquery-1.7.1.min.js"></script> <title>title</title> </head> <body onload="onload();"> <div id="wrapper" style="width:100%;background-color:blue;position:absolute;top:40px;bottom:40px;overflow:hidden;"> <ul class="mainContent" style="width:90%;margin-left:5%;background-color:yellow;"> <li> 3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br> </li> <li> 2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br> </li> <li> 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> </li> </ul> </div> </body> <script type="text/javascript"> var dragging = false; $("li").on("touchmove",function(){ dragging = true; }); $("li").on("touchend",function(){ if(dragging) return; else{ liTouchAction(this); } }); $("li").on("touchstart",function(){ dragging = false; }); //这里是li的触发事件 function liTouchAction(obj){ alert(1); }; </script> <script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper', { useTransform: false, onBeforeScrollStart: function (e) { var target = e.target; while (target.nodeType != 1) target = target.parentNode; if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA' && target.tagName != 'A') e.preventDefault(); } }); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); document.addEventListener('DOMContentLoaded', loaded, false); function onload(){ myScroll.refresh(); } </script> </html>
