iScroll基本信息
官网:http://cubiq.org/iscroll-4
更新:2012.07.14
版本:v4.2.5
兼容:iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webkit, Firefox, Opera desktop/mobile.
iScroll的历史
之所以iscroll会诞生,主要是因为无论是在iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。
这个不幸的规则导致所有web-app要模拟成app的样子时,只能由一个绝对定位的header 或是footer再加上一个可以内容的滚动的中间区域组成。
幸运的是移动webkit提供了一种强大的硬件加速的CSS属性,这个属性可以用来模拟这个缺失的功能,Iscroll从这里开始了前进之路,但是没有不带刺的玫瑰。让内容滚动像原生方式一般比想象中要难
iScroll 4 新特性
iScroll 4 这个版本完全重写了iScroll 3这个框架的原始代码,除了以前版本的iScroll特性以外,iScroll 4 还包括如下的特性:
- 缩放
- 拉动刷新
- 速度和性能提升
- 精确捕捉元素
- 自定义滚动条
快速上手
使用指南
在此文档中你会发现很多例子来教会你如何快速上手iScroll脚本库。参看文中的demo小例子并仔细阅读此文档,可能有点小无聊,但是这篇文章中却是iScroll这个脚本库的精髓之所在哦。
iScroll需要对所要进行滚动的元素进行初始化,并且不限定一个页面中使用iScroll的元素的个数(这里不考虑您的硬件配置)。滚动元素中内容的类型和长度在一定程度上将会影响iScroll脚本库里可以同时使用的元素的个数。
使用iScroll这个脚本库时,DOM树的结构要足够简单,移除不必要的标签,尽量避免过多的标签嵌套使用。
最优的使用iScroll的结构如下所示:
<div id="wrapper">
<ul>
<li></li>
.....
</ul>
</div>
在这个小例子中,ul标签将会被滚动。iScroll一定要与滚动内容外面的wrapper进行联系才会产生效果。
注意事项
只有wrapper里的第一个子元素才可以滚动,如果你想要更多的元素可以滚动,那么你可以试试下面的这种写法:
<div id="wrapper">
<div id="scroller">
<ul>
<li></li>
...
</ul>
<ul>
<li></li>
...
</ul>
</div>
</div>
在这个例子中,scroller这个元素可以滚动,即便它包含两个ul元素
实例化iScroll
iScroll必须在调用之前实例化,你可以在下面几种情况下对iScroll进行实例化:
- onDOMContentLoaded
- onLoad
- 以内联inline方式
ONDOMContentLoaded
适用于滚动内容只包含文字、图片,并且所有的图片都有固定的尺寸
使用方法:(在head标签中添加如下代码)
<script src="iscroll.js"></script>
<script>
var myscroll;
function loaded(){
myscroll=new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded",loaded,false);
</script>
onLoad
有些时候在DOMContentLoaded的状态下就初始化iScroll其实是有点草率的,因此此时页面的资源可能还没有全部加载完毕。如果你遇到了一些很怪异的行为可以试试下面的写法:
<script src="iscroll.js"></script>
<script>
var myscroll;
function loaded(){
setTimeout(function(){
myscroll=new iScroll("wrapper");
},100 );
}
window.addEventListener("load",loaded,false);
</script>
这种情况下iScroll会在页面资源(包括图片)加载完毕100ms之后得到初始化,这应该是一种比较安全的调用iScroll的方式。
inline初始化
这种情况会在页面加载到js的时候就进行调用,此方法不推荐使用,但是很多javascript的大牛都在用这种方式,我又 有什么理由不赞成呢?
<script src="iscroll.js"></script>
<div id="wrapper">
<ul>
<li></li>
.....
</ul>
</div>
<script>
var myscroll=new iScroll("wrapper");
</script>
不过建议你使用一些框架的ready方法来安全调用iScroll(比如jquery里的ready())。
iScroll 参数
iScroll里的第一个参数很简单就是外容器的id,或者css语法格式的class,如'.home .scroll'。
第二个参数允许你自定义一些属性配置和方法,比如下面的这段代码:
<script>
var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});
</script>
第二个参数通常都是一个对象,像上面的这个例子里就设定了不显示滚动条。所有参数如下(*
号为常见参数):
参数名 | 说明 | 可选值 | 默认值 |
---|---|---|---|
hScroll *
|
是否允许水平滚动 |
false 否 true 是 |
true |
vScroll *
|
是否允许垂直滚动 |
false 否 true 是 |
true |
bounce *
|
是否超过实际位置反弹 |
false 否 true 是 |
true |
bounceLock | 当内容少于滚动是否可以反弹 |
false 否 true 是 |
false |
momentum *
|
是否开启拖动惯性 |
false 否 true 是 |
true |
lockDirection | 当水平或垂直拖动时是否锁定另一边的拖动 |
false 否 true 是 |
true |
useTransform | 是否使用CSS变形 |
false 否 true 是 |
true |
useTransition | 是否使用CSS变换 |
false 否 true 是 |
false |
checkDOMChanges | 是否自动检测内容变化 |
false 否 true 是 |
false |
topOffset | 已经滚动的基准值(一般用在拖动刷新) | 数字值 | 0 |
x | 滚动水平初始位置(负值) | 数字值 | 0 |
y | 滚动垂直初始位置(负值) | 数字值 | 0 |
参数名 | 说明 | 可选值 | 默认值 |
---|---|---|---|
hScrollbar *
|
是否显示水平滚动条 |
false 否 true 是 |
true |
vScrollbar *
|
是否显示垂直滚动条 |
false 否 true 是 |
true |
fixedScrollbar | 在iOS系统上,当元素拖动超出了scroller的边界时,滚动条会收缩,设置为true 可以禁止滚动条超出scroller的可见区域。 |
false 否 true 是 |
默认在Android上为true , iOS上为false
|
hideScrollbar | 是否隐藏滚动条 |
false 否 true 是 |
默认在Android上为false , iOS上为true
|
fadeScrollbar | 滚动条是否渐隐渐显 |
false 否 true 是 |
默认在Android上为false , iOS上为true
|
scrollbarClass *
|
字定义滚动条的样式名 | 自定义class | '' |
参数名 | 说明 | 可选值 | 默认值 |
---|---|---|---|
zoom | 是否放大 |
false 否 true 是 |
false |
zoomMin | 放大的最小倍数 | 数字值 | 1 |
zoomMax | 放大的最大倍数 | 数字值 | 4 |
doubleTapZoom | 双击放大倍数 | 数字值 | 2 |
wheelAction | 鼠标滚动行为(还可以是zoom) |
none 不支持 'scroll' 鼠标滚动 'zoom' 鼠标缩放 |
'scroll' |
参数名 | 说明 | 可选值 | 默认值 |
---|---|---|---|
snap | 是否开启捕捉元素,snap值可以为true 或是 DOM元素的tagname,当为true 时,捕捉的元素会根据可滚动的位置和滚动区域计算得到可滑动几页。如果为tagname,则滑动会对齐到捕捉的元素上。 |
false 否 true 是< DOM元素的tagname
|
false |
snapThreshold | 滑动的长度限制,只有大于这个距离才会触发捕捉元素事件 | 数字值 | 1 |
参数名 | 说明 | 可选值 | 默认值 |
---|---|---|---|
onBeforeScrollStart | 开始滚动前的事件回调 默认是阻止浏览器默认行为 |
null 不设置 Function 自定义函数 |
function (e) { e.preventDefault(); } |
onRefresh | refresh 的回调 | null | |
onScrollStart | 开始滚动的回调 | ||
onBeforeScrollMove | 在内容移动前的回调 | ||
onScrollMove | 内容移动的回调 | ||
onBeforeScrollEnd | 在滚动结束前的回调 | ||
onScrollEnd | 在滚动完成后的回调 | ||
onTouchEnd | 手离开屏幕后的回调 | ||
onDestroy | 销毁实例的回调 | ||
onZoomStart | 放大开始时的回调 | ||
onZoom | 放大的回调 | ||
onZoomEnd | 放大结束后的回调 |
iScroll 方法API
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
拉动刷新
说明
自从Twitter和一些Apple的本地化应用出现了这个效果之后,这个效果就变得非常流行,你可以点击这里(需要*)看看视频先一睹为快,也可以点击这里试试拉动刷新是如何工作的。
实现原理
- 通过
topOffset
参数属性设置iScroll已经滚动的基准值; - 通过
onScrollMove
参数方法判断当前滚动是到顶端还是底端; - 通过
onScrollEnd
参数方法触发加载新数据,再通过refresh
方法重新渲染界面; - 通过
onRefresh
参数方法调整刷新后的界面结构;
<script>
var myScroll =new iScroll("wrapper",{
topOffset: 50,
onRefresh: function(){...},
onScrollMove: function(){...},
onScrollEnd: function()...{}
});
</script>
具体的实现代码可以查看这里的源文件;
缩放
我们不得不面对一个事实,那就是光有滚动其实没什么新意的。这就是为什么在iScroll 4这个版本里我们允许你可以放 大和缩小。想要这个功能,只需要设置放大的参数zoom 为true即可实现利用手势来放大和缩小。你可以看看这儿。
双击放大和缩小的功能在iScroll 4里也是得到支持的。要使用缩放功能,你至少需要如下配置:
<script>
var myScroll =new iScroll("wrapper",{zoom:true});
</script>
如果你想对缩放功能进行深度的自定义的话可以使用下面的一些选项:
参数名 | 说明 |
---|---|
zoomMax | 指定允许放大的最大倍数,默认为4 |
捕捉元素
捕捉的功能会促使scroller去重新定义位置,这样可以制作更加花哨的传送带效果。点击这里有个小例子。
默认情况下,iScroll将scroller分成四分体,或者是相同大小的wrapper。iScroll 4加入了这个属性允许捕捉scroller里的任何元素,不考虑外部wrapper的大小。如果你想要实现这样的传送带效果,我建议你使用“quadrant”分割。最佳的设置如下:
<script>
var myscroll=new iScroll("wrapper",{
snap:true,
momentum:false,
hScrollbar:false,
vScrollbar: false
});
</script>
捕获元素,可以通过传递一个字符串来作为查询条件,如下:
<script>
var myscroll=new iScroll("wrapper",{
snap:"li",
momentum:false,
hScrollbar:false,
vScrollbar: false
});
</script>
在这个例子中scroller可以捕捉到滚动区域中最左上角的li元素
自定义滚动条
在iScroll 4这个版本中,可以利用一系列的css来自定义滚动条的呈现。可以给滚动条添加一个class参数,如下:
<script>
var myscroll=new iScroll("wrapper",{
scrollbarClass: "myScrollbar"
});
</script>
你可以点击这里看一个小例子,在这个小例子里,myScrollbarH这个类被添加到了水平滚动条上,myScrollbarV这个类则被添加给了垂直方向上的滚动条上了。需要提醒的是,滚动条是由两个元素组合而成的:容器和显示器。容器同wrapper的高度相同,而显示器则代表的是滚动条本身。
滚动条的HTML结构如下:
<div class="myScrollbarV">
<div></div>
</div> .myscrollbarV{
position:absolute;z-index:100;width:8px;bottom:7px;top:2px;right:1px;
} .myScrollbarV > div {
position:absolute;
z-index:100;
width:100%;
/* The following is probably what you want to customize */
background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
border:1px solid #800;
-webkit-background-clip:padding-box;
-webkit-box-sizing:border-box;
-webkit-border-radius:4px;
-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
}
iscroll总结的更多相关文章
-
【IScroll深入学习】解决IScroll疑难杂症
前言 在去年,我们对IScroll的源码进行了学习,并且分离出了一段代码自己使用,在使用学习过程中发现几个致命问题: ① 光标移位 ② 文本框找不到(先让文本框获取焦点,再滑动一下,输入文字便可重现) ...
-
使用 iscroll 实现焦点图无限循环
现在大家应该都看到过焦点图轮播的效果,这个效果是什么样我就不截图了.昨天做练习,练习要求是使用iscroll实现焦点图的无限循环滚动,并且当手指触摸焦点图后,停止焦点图的循环滚动.第一次接触iscro ...
-
iscroll.js 下拉刷新和上拉加载
html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
-
H5基于iScroll实现下拉刷新,上拉加载更多
前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据 ...
-
iscroll
在原生APP的开发中,有一个常见的功能,就是下拉刷新的功能,这个想必大家都是知道的,但是原生APP的开发,有一个很大的问题就是,你每次更新一些功能,就要用户重新下载一次版本,尤其是在iOS系统中,新版 ...
-
【IScroll深入学习】突破移动端黑暗的利器(上)
前言 在去年,我们对IScroll的源码进行了学习,并且分离出了一段代码自己使用,在使用学习过程中发现几个致命问题: ① 光标移位 ② 文本框找不到(先让文本框获取焦点,再滑动一下,输入文字便可重现) ...
-
滚动条美化实践(原生js,iscroll,nicescroll)
近期需要改造项目中的滚动条,使原滚动条在三大浏览器下表现相同,分享一下自己的改造经历: 项目中的滚动条分布在网页的各个小窗口中,使用的是-webkit-scrollbar制作,在-webkit内核的浏 ...
-
jquery——移动端滚动条插件iScroll.js
官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ ...
-
iscroll 加载不全解决方案
例如上图中,get_kaijiang 中如果执行一段ajax跨域传输的话 function get_kaijiang(){ ajax------- $('#div').append(html); -- ...
随机推荐
-
windows下nginx的启动关闭
Windows下Nginx的启动.停止等命令 在Windows下使用Nginx,我们需要掌握一些基本的操作命令,比如:启动.停止Nginx服务,重新载入Nginx等,下面我就进行一些简单的介绍. .启 ...
-
setAttribute一个兼容性问题
前几天工作中遇到一个js问题,本来js就不大会,倒腾了好长时间,并在做弹窗的时候用到了setAttribute,出现了不兼容的问题,在网上查了好多,真是郁闷,看来啥都得学啊. 主要的工作是做一个根据时 ...
-
安装gitolite,并ssh公钥无密码登录
安装gitolite,并ssh公钥无密码登录 gitolite是管理git版本库的一种方案,它将git版本库的管理信息放在了一个特殊git版本库里.gitolite与linux操作系统集成了,需要使用 ...
-
LeetCode_Pascal&#39;s Triangle
Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5, Retu ...
-
获取远程IP、字符串解析
public class StringUtil { private static final Pattern IPV4_PATTERN = Pattern.compile( "^(25[0- ...
-
bootstrap和easyui
1.easyui:自定义的样式要在原先的easyui样式之前引入,这样自定义的样式才能把原先的样式覆盖,即放置顺序为: <link rel="stylesheet" href ...
-
jQuery html5Validate基于HTML5表单 异步服务器端验证
1. HTML5 自带的Validate 很漂亮,很好用, 但是一定要在form里用submit按钮,才生效 <form id="frmInfo" action=" ...
-
Ubuntu18.04下安装比特币客户端
一.下载有两种安装方式:安装包和源码 二.安装1.通过安装包安装在https://bitcoin.org/en/download下载Windows,Mac OSX,Linux对应的安装包.安装过程比较 ...
-
hdu 5616
Jam's balance Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tot ...
-
MySQL操作的相关命令
拷贝表,并且复制两条数据到新表中 create table t_comments_sample2 like t_comments_sample; #拷贝表结构 ,;#复制两条数据 MySQL Work ...