iScroll学习笔记

都说iScroll是移动端开发必学的库之一，先来看看为啥要用iScroll。网上找了找资料，总结下原因如下：

1、position：fixed 在移动端浏览器上的兼容性不好

简单列举如下：

IOS的Safari ：

• IOS5及以后的版本支持该属性，
• IOS4及以下会把它当成默认的 position: static， 跟着页面一起滚动

Android ：

• Android 2.1及以下不支持
• Android 2.2会在滚动完成之后把定位的元素拉回到原来的位置
• Android 2.3 只有在禁止页面缩放的情况下才支持固定定位
• Android 3 和 4 支持

更多的机型和浏览器版本请戳这里

2、原生的滚动在手机浏览器上不太流畅，体验不好

3、暂时没有了，以后有了再补充

入门

基本的DOM结构如下：

<header>IScoll</header>
<div id="wrapper">
    <ul>
        <li></li>
        ...
    </ul>
</div>
<footer>Footer</footer>

外部容器的 id 必须为 wrapper 这是源码里写死的，只有容器的第一个子元素才能滚动，上面的代码中，滚动的是ul。

给wrapper添加一个 position: relative 或者 absolute 可以解决很多因错误计算容器尺寸造成的问题。

每个需要滚动的区域都需要进行初始化，初始化代码如下

document.addEventListener('DOMContentLoaded', loadHandler, false);

function loadHandler(){
    var myScroll = new IScroll('#wrapper');
}

然后就可以滚动了，超级简单有木有！！

初始化代码最好放在 window onload 事件处理函数中，或者 DOMContentLoaded 事件处理函数中，脚本需要知道滚动区域的宽/高，如果有一些图片没有指定宽高，IScroll可能会错误地计算滚动尺寸。

如果DOM结构比较复杂，onload之后留出100到200毫秒的时间给iScroll初始化是比较明智的，

另外，文档里还有这样一段话：

box-shadow, opacity, text-shadow 和 alpha 通道这些属性不能和硬件加速很好的结合。当只有少量元素时，滚动效果会很流畅，但是一旦你的DOM结构变的很复杂，就会体验很渣.

配置参数说明

hScroll: true, //是否水平滚动
vScroll: true, //是否垂直滚动
x: 0, //滚动水平初始位置
y: 0, //滚动垂直初始位置
snap: true, //值可以为true或是DOM元素的tagname，当为true时，对齐的坐标会根据可滚动的位置和滚动区域计算得到可滑动几页，如果为tagname,则滑动会对齐到元素上
bounce: true, //是否超过实际位置反弹
bounceLock: false, //当内容少于滚动是否可以反弹，这个实际用处不大
momentum: true, //动量效果，拖动惯性
lockDirection: true, //当水平滚动和垂直滚动同时生效时，当拖动开始是否锁定另一边的拖动
useTransform: true, //是否使用CSS形变
useTransition: false, //是否使用CSS变换
topOffset: 0, //已经滚动的基准值(一般情况用不到)
checkDOMChanges: false, //是否自动检测内容变化(这个检测不是很准)

//Scrollbar相关参数，通过scrollbar这些参数可以配置iscroll的滚动条，通过scrollbarClass可以自己定义一套滚动条的样式。
hScrollbar: true, //是否显示水平滚动条
vScrollbar: true, //同上垂直滚动条
fixedScrollbar: isAndroid, //对andriod的fixed
hideScrollbar: isIDevice, //是否隐藏滚动条
fadeScrollbar: isIDevice && has3d, //滚动条是否渐隐渐显
scrollbarClass: '', //自定义滚动条的样式名

//Zoom放大相关的参数，通过它，对于一个固定显示图片区域的类似应用，可以非常简单的做到固定滚动，包括两指放大的应用。
zoom: false, //默认是否放大
zoomMin: 1, //放大的最小倍数
zoomMax: 4, //最大倍数
doubleTapZoom: 2, //双触放大几倍
wheelAction: 'scroll', //鼠标滚动行为（还可以是zoom）

//自定义Events相关参数 
onRefresh: null, //refresh 的回调，关于自身何时调用refresh 后面会继续谈到
onBeforeScrollStart: function(e){ e.preventDefault(); }, //开始滚动前的时间回调，默认是阻止浏览器默认行为
onScrollStart: null, //开始滚动的回调
onBeforeScrollMove: null, //在内容移动前的回调
onScrollMove: null, //内容移动的回调
onBeforeScrollEnd: null, //在滚动结束前的回调
onScrollEnd: null, //在滚动完成后的回调
onTouchEnd: null, //手离开屏幕后的回调
onDestroy: null, //销毁实例的回调
onZoomStart: null, //开始放大前的回调
onZoom: null, //放大的回调
onZoomEnd: null //放大完成后的回调

方法

destroy 
顾名思义，是用来销毁你实例化的iScroll 实例，包括之前绑定的所有iscroll 事件。 

refresh 
这个方法非常有用，当你的滚动区域的内容发生改变 或是 滚动区域不正确，都用通过调用refresh 来使得iscroll 重新计算滚动的区域，包括滚动条，来使得iscroll 适合当前的dom。 

scrollTo 
这个方法接受4个参数 x, y, time, relative x 为移动的x轴坐标，y为移动的y轴坐标, time为移动时间，relative表示是否相对当前位置。 

scrollToElement 
这个方法实际上是对scrollTo的进一步封装，接受两个参数(el,time)，el为需要滚动到的元素引用，time为滚动时间。 

scrollToPage 
此方法接受三个参数(pageX,pageY,time) 当滚动内容的高宽大于滚动范围时，iscroll 会自动分页，然后就能使用scrollToPage方法滚动到页面。当然，当hscroll 为false 的时候，不能左右滚动。pageX这个参数就失去效果 

disable 
调用这个方法会立即停止动画滚动，并且把滚动位置还原成0，取消绑定touchmove, touchend、touchcancel事件。 

enable 
调用这个方法，使得iscroll恢复默认正常状态 

stop 
立即停止动画 

zoom 
改变内容的大小倍数,此方法接受4个参数，x,y,scale,time 分别表示的意思为，放大的基准坐标，以及放大倍数，动画时间 

isReady 
当iscroll 没有处于正在滚动，没有移动过，没有改变大小时，此值为true

转载于:https://www.cnblogs.com/walle2/p/4830948.html