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浏览器。