首页 > 代码库 > iScroll小计
iScroll小计
iScroll版本
- iScoll.js 常规版本。
- iscoll-lite.js 精简版。不支持快速跳跃,滚动条,鼠标滚轮,快捷键绑定。如果你需要的是滚动(特别是在移动平台)这个个又小又快的解决方案。
- iscroll-zoom.js 在标准滚动功能上增加缩放功能。
- iscroll-infinite.js 可以做无限缓存的滚动。
入门
1. 尽可能保持DOM结构的简洁。
最佳HTML结构如下:
<div id="wrapper"> <ul> <li>...</li> <li>...</li> ... </ul></div>
2. iScroll作用与滚动区域的外层。
3. 脚本初始化
<script type="text/javascript"> var myScroll = new IScroll(‘#wrapper‘);</script>
支持css ID和css 名称传递滚动容器元素(本例中的“#wrapper”)。
4. 只有容器的第一个子元素才会滚动,其他的忽略。()
初始化
初始化时需要注意的几个问题:
- DOM准备完成后才能初始化iScroll,保险的方式是在window的onload事件中启动它。
- 初始化之前要给定滚动区域的高度和宽度。(若有图片在滚动区域导致不能立马获取区域的高度和宽度,iScroll的滚动尺寸可能会出错)
- 在滚动容器(wrapper)上增加position:relative或者absolute属性,能解决大部分滚动容器大小计算错误问题。
demo barebone中的样式:
2d-scroll中的样式:
配置iScroll
在iScroll初始化阶段通过构造函数的第二个参数进行配置
var myScroll = new IScroll(‘#wrapper‘, { mouseWheel: true, scrollbars: true});
常用的一些参数:
hscroll: false 禁用水平滚动 (horizontal [?h?r??z?ntl] 水平的)
vScroll: false 禁用垂直滚动 (vertical [?v?:t?kl] 垂直的)
hideScrollbar: true 禁用滚动条
刷新
iScroll需要知道容器(wrapper)和滚动内容(scroller)的大小。在iScroll初始化的时候进行计算,如果元素大小发生了变化,需要告诉iScroll,DOM发生了变化。这个可以通过调用refresh方法来实现。
每当你触摸DOM的时候,浏览器的渲染器会对页面进行重绘。一旦这个重绘发生,我们就尅安全的读取新的DOM属性了。重绘不是瞬间完成的,所以我们需要在刷新iScroll之前给重绘一点时间。
例子:
ajax(‘page.php‘, onCompletion);function onCompletion () { // Update here your DOM setTimeout(function () { myScroll.refresh(); }, 0);};
如果你的html结构相当复杂,那么你应该给浏览器更多的执行时间,可以设置100到200毫秒的超时时间。
自定义事件
使用on(type, fn)方法注册事件
myScroll = new IScroll(‘#wrapper‘);myScroll.on(‘scrollEnd‘, doSomething);
可以绑定的事件:
beforeScrollStart, 在用户触摸屏幕但还没有开始滚动时触发
scrollStart, 开始滚动
scroll, 内容滚动时触发
scrollEnd, 停止滚动时触发
zoomStart, 开始缩放
zoomEnd 缩放结束
iScroll小计
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。