作用:
可以让区域滚动效果好看一些
使用:
1. html结构
外面必须包一层盒子,切内部的元素要尽量简单,不然会影响滚动效果
<div id="wrapper">//overflow:hidden;
<ul>
//只有第一个DOM结构(ul)被实例化,这个DOM可以纵向或者横向的滚动,
//多出的内容会被wrapper的样式hidden。
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
注意:
1. wrapper里面只有第一个ul能被实例化
2. 动态创建dom元素的时候,需要在创建之前实例化,myscroll.refresh();//当DOM结构发生变化的时候,需要刷新iScroll
2. 实例化
var myScroll = new iScroll("wrapper");
var myscroll=new iScroll("wrapper",{hScrollbar:false});
3. 实例化可以带的参数
hScroll false 禁止横向滚动 true横向滚动 默认为true
vScroll false 禁止垂直滚动 true垂直滚动 默认为true
hScrollbar false隐藏水平方向上的滚动条
vScrollbar false 隐藏垂直方向上的滚动条
fadeScrollbar false 指定在无渐隐效果时隐藏滚动条
hideScrollbar 在没有用户交互时隐藏滚动条 默认为true
bounce 启用或禁用边界的反弹,默认为true
momentum 启用或禁用惯性,默认为true,
此参数在你想要保存资源的时候非常有用
lockDirection false取消拖动方向的锁定,
true拖动只能在一个方向上(up/down 或者left/right)
4. iscroll的事件
scrollTo(x, y, time, relative)方法:传入4个参数:X轴滚动距离,Y轴滚动距离,效果时间,是否相对当前位置。
scrollToElement(el, time, offsetX, offsetY, easing)
refresh()方法:在DOM结构发生改变之后,需要刷新iScroll,否则滚动插件会实例化的不准确。
destroy() 销毁IScroll,节省资源
例子:
myScroll2.scrollTo(0,-200)
5. iscroll的方法
scrollEnd:滚动结束时执行的事件,如果想在滚动结束时出发摸个事件,这个方法就拍上用处了。
refresh:在DOM结构发生改变之后,需要刷新iScroll,否则滚动插件会实例化的不准确,onRefresh是刷新完iScroll会执行的方法。
beforeScrollStart:开始滚动前的时间回调,默认是阻止浏览器默认行为 。
scrollStart:开始滚动的回调。
beforeScrollMove:在内容移动前的回调。
scrollMove:内容移动的回调。
beforeScrollEnd:在滚动结束前的回调。
touchEnd:手离开屏幕后的回调。
destroy:销毁实例的回调。
例子:
myScroll2.on('scrollEnd', function(){
console.log(1)
});