码迷,mamicode.com
首页 > 其他好文 > 详细

iScroll小计

时间:2015-01-11 16:13:20      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:

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小计

标签:

原文地址:http://www.cnblogs.com/kaixinbocai/p/4216579.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!