滚~滚~滚动条（移动端 ）
这段时间写的有一个是外卖App的demo，手机端是不支持鼠标滚轮移动的嘛，那么问题就来了，该如何让其实现滑动滚动呢？
这里就涉及到一个新的js插件了——iscroll.js。
对，就是这个小东西。来看看他的用法，附上链接http://wiki.jikexueyuan.com/project/iscroll-5/
链接里写的很清楚啦，看不懂我也没办法哈，在下要开始记录遇到的问题了
首先是如何实现滚动，在武功秘籍里说到，给想要的内容包上一层div外框，what？裸露在我面前我还得给他穿件衣服？对，就是这样。
那么还不懂？真是个小chu男，举个例子吧
首先是js，我们引入了插件，那么在js文件中写下
var myScroll ；
function firstloaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(firstloaded, 200); }, false);
解释一下上面的代码，第一行是阻止鼠标的默认行为，第二行是在200毫秒后执行上面的函数。那么上面的东西是什么呢，也就是说执行的这个函数会给叫做这个id的东西（wrapper）加滚动条。
在括号里面的就是外层包裹的div的id了。贴下代码
<div class="height scroller-wrap" id="wrapper">
<ul class="navs" >.
<li>榴莲</li>
<li>西瓜</li>
<li>椰子</li>
</ul>
</div>
外层包裹的div的id也就是函数声明里面的new iScroll('wrapper')，在这之后我们还得给div加一个overflow:hidden；给他设置一个高度height，那么滚动条就已经写好了，附上一个简陋的小demo。其实很简单，其实很自然。chrome调试切换成手机版就可以模拟移动端滚动了。代码贴的没位置了，这篇先到这里，下一篇再总结其他问题。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
ul{
background-color: #9E9E9E;
margin:0 auto;
width: 200px;
}
ul li{
list-style: none;
}
</style>
<body>
<div id="wrapper" style="height: 500px;overflow: hidden;">
<ul class="navs" >.
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
<li>榴莲</li>
</ul>
</div>
</body>
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function firstloaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(firstloaded, 200); }, false);
</script>
</html>
