iscroll.js介绍与minimap的实现
1.iscroll.js简介
iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。iscroll.js是Matteo Spinelli开发的一个js文件，使用原生js编写，不依赖与任何js框架。旨在解决移动webkit系浏览器的区域滚动问题，兼容mobile safari、android默认浏览器、safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心浏览器。比如下面小栗子，一般wrapper（ iScroll要求将需要显示的内容放在一个wrapper中，这个wrapper指的就是内容显示的区域）属性里都会包含支持诸多浏览器的语句：
2.iscroll 结构简介
此处将针对minimap的应用介绍几个iscroll的结构
2.1 HTML简单结构
<div id="wrapper">
<div id="scroller">
<ul>
<li> .....</li>
<li> .....</li>
</ul>
</div>
</div>一般是列表之类的，放在li中，然后用css对ul、li和id：scroller和wrapper进行属性设置。scroller为使用滚动，缩放等功能区域。
2.2 基本脚本初始化
<script type="text/javascript">
var myScroll = new IScroll('#wrapper');
</script>Scroll是一个类，每个需要使用滚动功能的区域均要进行初始化。
2.3 参数配置
var myScroll = new IScroll('#wrapper', {
mouseWheel: true,
scrollbars: true
});该例子示例了在iScroll初始化时开启鼠标滚轮支持和滚动条支持，根据需要开启支持即设置为true，如需要click是，添加click:true等。
2.4 滚动编程接口
此处我们介绍scrollTo(x, y, time, easing)用法，对应存在的一个叫做myScroll的iScroll实例，可以通过下面的方式滚动到任意的位置：
myScroll.scrollTo(0, -100);通过上面的方式将向下滚动100个像素。记住：0永远是左上角。需要滚动必须传递负数。
time 和 easing是可选项。他们控制滚动周期（毫秒级别）和动画的擦除效果。擦除功能是一个有效的IScroll.utils.ease对象。例如应用一个一秒的经典擦除动画你应该这么做：
myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);擦除动画的类型选项有：quadratic, circular, back, bounce, elastic。
3.minimap的实现
首先来看一下效果：
（1）首先导入 iscroll.js文件；然后在script中定义参数如下：
（2）body函数如下：bookmarks中的第一二个坐标为点击超链接按钮时，minimap-indicator小容器本处即黄色矩形左上点的坐标。各模块显示样式在css中定义！
<div id="wrapper">
<div id="scroller"></div>
</div>
<div id="minimap">
<div id="minimap-indicator"></div>
</div>
<ul id="bookmarks">
<li><a href="javascript:myScroll.scrollTo(-290, -210, 400, IScroll.utils.ease.back)">Face</a></li>
<li><a href="javascript:myScroll.scrollTo(-410, -550, 400, IScroll.utils.ease.back)">Necklace</a></li>
<li><a href="javascript:myScroll.scrollTo(-150, -630, 400, IScroll.utils.ease.back)">hair</a></li>
</ul>四、总结
iScroll不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。在一个项目中包含仅仅4kb大小的iScroll，项目便拥有了滚动，缩放，平移，无限滚动，视差滚动，旋转功能。即使平台本身提供的滚动已经很不错，iScroll可以在此基础上提供更多不可思议的功能。具体来说：
1）细粒度控制滚动位置，甚至在滚动过程中。总是可以获取和设置滚动器的x，y坐标。
2）动画可以使用用户自定义的擦出功能（反弹’bounce’，弹性’elastic’，回退’back’，…）。
3）可以很容易的挂靠大量的自定义事件（onBeforeScrollStart）
4）开箱即用的多平台支持。从很老的安卓设备到最新的iPhone，从Chrome浏览器到IE浏览器。