概述:
iScroll的产生:
iScroll的使用方法:
1
2
3
4
5
6
7
8
9
|
<div id= "wrapper" > //overflow:hidden; <ul> //只有第一个DOM结构(ul)被实例化,这个DOM可以纵向或者横向的滚动, //多出的内容会被wrapper的样式hidden。 <li>1</li> <li>2</li> <li>3</li> </ul> </div> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<div id= "wrapper" > //overflow:hidden; <div id= "first" > //只有第一个DOM结构(ul)被实例化,这个DOM可以纵向或者横向的滚动, //多出的内容会被wrapper的样式hidden <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <ul> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </div> |
1
|
var myScroll = new iScroll( "wrapper" ); |
iScroll应该如何实例化:
(1)在HTML(uw3c.html)页面底部(body之后html之前)加载iscroll.js与当前页面的uw3c.js,这样能确保HTML的DOM结构能加载出来。
(2)在JS插入页面DOM结构和数据之前实例化iScroll,也就是在JS的最开始实例化,因为之后可能会使用JS来插入DOM或者数据,这样以来能确保在插入数据之前iScroll已经实例化了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
HTML: //HTML结构 <html > <body> ...code... </body> //插入iscroll.js文件 <script type= "text/javascript" src= "js/iscroll.js" > </script > //插入本页面JS文件 <script type= "text/javascript" src= "js/uw3c.js" > </script > </html> JS: //JS文件内容 var myscroll; function iscroll(data){ //实例化iScroll myscroll= new iScroll( "wrapper" ); pageData(data); } function pageData(obj){ $( "body" ).html(obj); myscroll.refresh(); //当DOM结构发生变化的时候,需要刷新iScroll } iscroll( "<div>pagedata</div>" ); |
iScroll中的参数:
1
|
var myscroll= new iScroll( "wrapper" ,{hScrollbar: false }); |
1
2
3
4
5
6
|
var opts = { vScroll: false , //禁止垂直滚动 snap: true , //执行传送带效果 hScrollbar: false //隐藏水平方向上的滚动条 }; var myscroll = new iScroll( "wrapper" ,opts); |
1
2
3
4
5
6
7
8
9
10
11
|
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) |
iScroll中的方法:
1
2
3
4
|
//在200毫秒的时间内,Y轴向上滚动100像素; uw3c.scrollTo(0, -100, 200) //在200毫秒的时间内,相对于当前位置,X轴向左滚动100像素; uw3c.scrollTo(-100, 0, 200, true ) |
1
|
uw3c.refresh(); //刷新iScroll |
1
2
3
4
5
6
7
8
|
onPosChange: function (x,y){ if (y < -200){ //如果Y周向上滚动200像素,$("#uw3c")就显示,否则就隐藏。 $( "#uw3c" ).show(); } else { $( "#uw3c" ).hide(); } } |
1
2
3
4
|
//滚动结束后,执行的方法,滚动后会出现提示框alert("uw3c.com") onScrollEnd: function (){ alert( "uw3c.com" ); } |
截至到笔者发布这篇文章时,通过样式:
- overflow:scroll;
- -webkit-overflow-scrolling:touch;
IOS5 已经能够支持区域滚动了。但是andriod4 还是不行...
iScroll 使用起来很简单,首先你需要一个合理的DOM结构:
- <div id="wrapper">
- <ul id="scroll">
- <li></li>
- ...
- ...
- </ul>
- </div>
其次是推荐的样式:
- #wrapper {
- position:relative;
- z-index:1;
- /* your desired width, auto and 100% are fine */;
- height:/* element height */;
- overflow:/* hidden|auto|scroll */;
- }
官方推荐这样的结构,因为iscroll只能滚动wrapper里的第一个子节点,或者说唯一一个子节点才能使得iscroll正确的生效。因为这个节点需要一个绝对定位的CSS属性,更重要的是这个节点里所包裹的内容有了一个统一的容器,我们只需要计算之后修改这个容器的属性值就可以达到我们滚动的效果。
iscroll 需要两个参数,第一个很简单就是外容器的id,第二个参数是一个参数对象。
通过这个对象可以传入iscroll的各项参数来配置iscroll。
他的参数基本分为四个部分
- 基础
- 滚动条
- 放大缩小
- 事件回调
以下由笔者整理的iScroll参数以及其代表的意思:
- hScroll: true, //是否水平滚动
- vScroll: true, //是否垂直滚动
- x: 0, //滚动水平初始位置
- y: 0, //滚动垂直初始位置
- bounce: true, //是否超过实际位置反弹
- bounceLock: false, //当内容少于滚动是否可以反弹,这个实际用处不大
- momentum: true, //动量效果,拖动惯性
- lockDirection: true,
- //当水平滚动和垂直滚动同时生效时,当拖动开始是否锁定另一边的拖动
- useTransform: true, //是否使用CSS形变
- useTransition: false, //是否使用CSS变换
- topOffset: 0, //已经滚动的基准值(一般情况用不到)
- checkDOMChanges: false, //是否自动检测内容变化
checkDOMChanges 这个不是十分靠得住,因为他目前是轮询检测offsetWidth、offsetHeight,然后才去调自身的refresh 重新计算滚动区域,但是有时候只检测这个不是很准..
- // Scrollbar 的相关参数
- hScrollbar: true, //是否显示水平滚动条
- vScrollbar: true, //同上垂直滚动条
- fixedScrollbar: isAndroid, //对andriod的fixed
- hideScrollbar: isIDevice, //是否隐藏滚动条
- fadeScrollbar: isIDevice && has3d, //滚动条是否渐隐渐显
- scrollbarClass: '', //字定义滚动条的样式名
通过scrollbar这些参数可以配置iscroll的滚动条,通过scrollbarClass可以自己定义一套滚动条的样式。
- // Zoom 放大相关的参数
- zoom: false, //默认是否放大
- zoomMin: 1, //放大的最小倍数
- zoomMax: 4, //最大倍数
- doubleTapZoom: 2, //双触放大几倍
- wheelAction: 'scroll', //鼠标滚动行为(还可以是zoom)
这个Zoom我觉得比较好用,对于一个固定显示图片区域的类似应用,可以非常简单的做到固定滚动,包括两指放大的应用。
wheelAction 这个参数是给PC的鼠标滚动定义的,可以定义为滚动鼠标滚轮放大。
- // 自定义 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
通过了解以上参数,你可以非常容易的配置自己的iscroll 应用:
你可以通过onScrollEnd 事件回调在结束滚动后执行一段你自己的代码
你也可以简单的新建一个可以通过双触放大的固定滚动区域。
你也可以什么都不做,只是简单的约定碰到边界是否反弹,等等。
- var myscroll = new iScroll('wrapper', {
- hScroll: false, //是否水平滚动
- vScroll: true, //是否垂直滚动
- y: 10, //滚动垂直初始位置
- bounce : false
- });
当然,在使用时,如果对创建的iscroll 实例保存引用会有很多好处:
你可以在内容改变时,DOM结构发生改变时调用 myscroll.refresh() 来重新计算固定滚动区域的内容高度,从而使得你的iscroll工作正常。
你也可以在你的应用结束时,用过这个引用调用destroy方法来,销毁这个iscroll 实例
等等....
当然,iscroll提供的Api也是非常丰富,所以我们可以通过使用iscroll来做很多webapp的应用,下一篇文章我将会主要介绍一下iscroll的公用调用方法,以及参数的控制。