二、初始化

    (1)html结构：   

        <div class="wrapper">

            只能让第一个子元素滚动

            <div>

                可放入多个子元素

            </div>

        </div>

    （2）css:  外层盒子是定高的

        <1>直接给定一个高度

        <2>在移动端，如果需要滚动，且需要高度全屏

            position: absolute (定位父元素是body)

            top:0

            bottom:0

    (3) 引入iscroll.js

        var myscroll = new IScroll(".wrapper")

三、自定义配置

        var myscroll = new IScroll(".wrapper"，{

            scrollX: true,  //能够水平滚动

            scrollY： false , //在水平滚动时，禁止垂直滚动

            snap: "li"  // snap: true

            click: true,

            //如果希望监听滚动事件，则不能引入iscroll.js,

            而需要引入iscroll-probe.js, 同时结合 probeType属性

            probeType: 3 // 也可以是1,2

        })

四、iscroll实例支持的事件

    myscroll.on("scroll",function(){})

    myscroll.on("scrollStart",function(){})

    myscroll.on("scrollEnd",function(){})

    myscroll.on("refresh",function(){})

五、iscoll实例的常用属性

    1. this.currentPage.pageX

    2. this.currentPage.pageY

    3. this.currentPage.x

    4. this.currentPage.y

    5. this.x

    6. this.y

六、实例的方法

    1.myscroll.refresh()  //非常重要的方法，在数据更新后，一定要调用一次该方法

    2. myscroll.scrollTo()

    3. myscroll.scrollBy()

    3. myscroll.goToPage()

iscroll.js是Matteo Spinelli开发的一个js文件，使用原生js编写，不依赖与任何js框架。旨在解决移动webkit系浏览器的区域滚动问题，兼容mobile safari、android默认浏览器、safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心浏览器。最新版本为iscroll4。

官方网站：iscroll4

iscroll的用武之地

1.区域滚动

我们在pc端web开发中，有时会用固定某一区域的宽度和高度，然后使用overflow:auto，使其内容在该区域内滚动。

iphone默认浏览器（mobile safari）也支持固定区域的滚动，但必须双指滑动操作，而且没有滚动条。mobile safari中的单指滑动只针对页面级别，不针对页面元素。这样的操作体验很麻烦，而且很多用户根本不知道双指能够区域滑动。

android自带浏览器也支持区域滚动，且可以单指滑动操作，但是滑动起来卡的半死半活，很不流畅。

使用iscroll,可以完美解决上述问题了，不仅可以在iphone和android上单指滑动，而且滑动起来流畅之极，酣畅淋漓。滑动过程中也有漂亮的滚动条提示，让你舒心不已。

2.固定定位

固定定位不是iscroll的原生用法，而是使用iscroll协助解决固定定位问题。

话说iphone很先进，但就是不支持position:fixed。这下苦了我们了，固定定位怎么解决啊，我们会经常遇到固定标题栏、固定工具栏等情况啊！！

使用iscroll协助解决：首先获取浏览器窗口高度；然后获取固定工具栏的高度；接着将除固定工具栏之外的内容全部放在一个固定区域内，该固定区域的高度=窗口高度-工具栏高度；之后对固定区域使用iscroll。这样，整个html页面的高度正好等于窗口高度，页面级别不会出现滚动，工具栏就一直固定在当前的位置。在固定区域内滑动，可以查看页面其他内容，不会影响工具栏的定位。

鼠标滚轮滚动

iscroll支持在pc端浏览器中使用鼠标滚轮控制区域滚动，但操作起来很不灵敏。这是由于iscroll对鼠标滚轮事件做了拦截，然后缩小了滚轮的滚动距离，详见iscroll4.js源代码608-609行：

wheelDeltaX = e.wheelDeltaX / 12//控制X轴鼠标滚轮速度

wheelDeltaY = e.wheelDeltaY / 12//控制Y轴鼠标滚轮速度

iscroll将每次的滚轮距离缩小为系统默认距离的12分之一，难怪滚起来很慢，感觉不灵敏。只需要将12改成1，滚轮的滚动速度就恢复正常了。你也可以根据实际需要设置成其他值。

输入框聚焦不灵敏、无法选择文字

使用了iscroll之后，你会发现点击输入框时不灵敏，经常无法聚焦；页面文字也无法选择和复制。这是由于iscroll要监听鼠标事件和触摸事件来进行滚动，所以禁止了浏览器的默认行为，详见源代码92行：

onBeforeScrollStart: function (e) { e.preventDefault()},

iscroll不分青红皂白，禁止了浏览器的一切默认行为，导致上述问题。所以我们需要稍作修改：

onBeforeScrollStart: function (e) {

var target = e.target

while (target.nodeType != 1) target = target.parentNode

if (target.tagName != ‘SELECT’ &&target.tagName != ‘INPUT’ &&target.tagName != ‘TEXTAREA’)

e.preventDefault()

},

判断触发事件的元素是不是input、select、textarea等表单输入类元素，如果不是就阻止默认行为。这样保证了输入类元素能正确快速聚焦。

2：还有移动端的zepto库 也有手势插件，

3：另外还有个叫QuoJS的手势插件 这个插件不依赖任何的库，

4：早期的应该是用wml语言支持的WMLScript实现。

5：举例：使用iscroll.js实现

1）下载iScroll.js，百度搜索iScroll.js下载即可

2）引入iScroll.js，在要使用滑动效果的地方，引入iScroll.js文件

3）编写规范的html格式

只有如下格式才能实现滑动效果

<div id="wrapper">

<div class="scroll">

这个区域可以滑动

</div>

</div>

如下格式不能滑动

<div id="wrapper">

<div class="other">这个区域可以滑动</div>

<div class="scroll">

这个区域不可以滑动了

</div>

</div>

只有wrapper的第一个子元素才能实现滑动效果。

4）编写js调用代码

var Scroll = new iScroll('wrapper',{hScrollbar:false, vScrollbar:false})

第一参数必需是滑动元素的父元素的id。

主要参数一览：

hScroll: true, 左右滑动，默认为true

vScroll: true,上下滑动

hScrollbar: true, 是否显示y轴滚动条，默认为显示

vScrollbar: true,是否显示X轴滚动条，默认为显示