首页 > 代码库 > iScroll小计

iScroll小计

2024-10-31 18:29:39   212人阅读

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


联系
我们