原文地址:

http://bigdots.github.io/2015/12/15/iScroll-js%E2%80%94%E2%80%94smooth%20scrolling%20for%20the%20web/

一、什么是iScroll

官方文档的解释: 
iScroll是一个高性能、占用空间小、依赖免费的多平台javascrip脚本库。它应用于桌面设备、移动设备和智能电视。它一直在大力优化性能和大小以便在现代设备和旧设备上提供流畅的运行。iScroll不仅仅只是用来滚动。它还可以处理任何用户交互需要的元素移动。它增加了滚动,缩放,平移,无限滚动、视差滚动、旋转木马,并且它仅仅只有4 kb。

二、为什么要用iScroll

由于不同的手机版本造成页面的弹性滚动条兼容性不好,iscroll封装了弹性滚动条插件可以跨手机版本实现弹性滚动UI设计

三、Getting started

注意事项:

  • IScroll需要对所要进行滚动的元素进行初始化。
  • iScroll的数量没有限制,你可以在每个页面使用任意数量的iScroll(如果硬件允许的话)  
  • 保持DOM尽可能简单。最优的HTML结构是:

滚动区域必须包裹在Iscroll中。在上面的例子中,UL元素将滚动。只有第一个子元素是滚动的,额外的子元素则会被忽略掉。

<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>

实例化:

<script type="text/javascript">
var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);
</script>

注意: 1.iScroll使用querySelector而不是querySelectorAll,所以选中的是第一个选择器元素。如果你需要iScroll适用于多个对象你要构建循环。 2.iScroll需要在DOM加载完毕时启动,最安全的办法是绑定在窗口onload事件。 3.iScroll需要知道滚动区域的高度/宽度

四、配置iScroll

在初始化阶段可以通过第二个参数来配置iScroll

var myScroll = new IScroll('#wrapper', {
mouseWheel: true,
scrollbars: true
});

上面的示例打开了鼠标滚轮和滚动条支持。

常用参数: 
hScroll : false 禁止横向滚动 true横向滚动 默认为true 
vScroll : false 精致垂直滚动 true垂直滚动 默认为true 
hScrollbar: false隐藏水平方向上的滚动条 
vScrollbar : false 隐藏垂直方向上的滚动条 
fixedScrollbar: 在iOS系统上,当元素拖动超出了scroller的边界时,滚动条会收缩,设置为true可以禁止滚动条超出scroller的可见区域。默认在Android上为true, iOS上为false 
fadeScrollbar :  false 指定在无渐隐效果时隐藏滚动条 
hideScrollbar :  在没有用户交互时隐藏滚动条 默认为true 
bounce :  启用或禁用边界的反弹,默认为true 
momentum   :启用或禁用惯性,默认为true,此参数在你想要保存资源的时候非常有用 
lockDirection : false取消拖动方向的锁定, true拖动只能在一个方向上(up/down 或者left/right)

iScroll-js—“smooth scrolling for the web”的更多相关文章

  1. iScroll.js 用法参考 (share)

    分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍清楚了.如果你英文比较好的话,可以看看官网的资料 ...

  2. 基于iscroll.js实现下拉刷新和上拉加载特效

    现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...

  3. iScroll.js 用法参考

    本文原文链接:http://www.cnblogs.com/duanhuajian/archive/2013/04/08/3008323.html 概要 iScroll 4 这个版本完全重写了iScr ...

  4. iScroll.js插件使用方法

    iScroll.js 用法参考 (share) 分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍 ...

  5. iscroll.js 用法介绍

    iscroll-5中文文档:http://wiki.jikexueyuan.com/project/iscroll-5/ 概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码. ...

  6. iscroll.js的简单使用方法

    参考链接:https://www.cnblogs.com/Renyi-Fan/tag/js%E6%8F%92%E4%BB%B6/default.html?page=2 目录 一.总结 一句话总结:Sc ...

  7. iScroll.js的用法

    概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码.这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用)提供了一 ...

  8. iscroll.js 下拉刷新和上拉加载

    html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. jquery——移动端滚动条插件iScroll.js

    官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ ...

随机推荐

  1. 【转】 SVM算法入门

    课程文本分类project SVM算法入门 转自:http://www.blogjava.net/zhenandaci/category/31868.html (一)SVM的简介 支持向量机(Supp ...

  2. 【团购活动】接口最全最好用的S5PV210开发板Sate210-F 开发板开始团购活动了,一起学习linux!

    接口最全最好用的S5PV210开发板Sate210-F 开发板开始团购活动了,一起学习linux!http://bbs.eeworld.com.cn/forum.php?mod=viewthread& ...

  3. MVC5入门

    http://www.cnblogs.com/youring2/p/mvc-5-examining-the-edit-methods-and-edit-view.html

  4. android xml 常用控件介绍

    android常用控件介绍 ------文本框(TextView)     ------列表(ListView)     ------提示(Toast)     ------编辑框(EditText) ...

  5. 快乐的JS正则表达式(三)

    ?的用途. 小任务:匹配一段网址如var str = "http://www.123.com/";注意http也可以是https var str = "http://i. ...

  6. Hya.io – 基于 Web 的数字音频工作站

    Hya.io 是基于 Web 的音频应用程序,通过 Web MIDI ,音频合成器,音序以及大量的插件来支持硬件 MIDI .您可以添加插件到工作区,将其连接到路由音频,进行播放和实验. HYA 支持 ...

  7. Windows及Linux平台下的计时函数总结

    本文对Windows及Linux平台下常用的计时函数进行总结,包括精度为秒.毫秒.微秒三种精度的各种函数.比如Window平台下特有的Windows API函数GetTickCount().timeG ...

  8. 使用Spark分析拉勾网招聘信息(二): 获取数据

    要获取什么样的数据? 我们要获取的数据,是指那些公开的,可以轻易地获取地数据.如果你有完整的数据集,肯定是极好的,但一般都很难通过还算正当的方式轻易获取.单就本系列文章要研究的实时招聘信息来讲,能获取 ...

  9. BZOJ 1054 广搜

    1054: [HAOI2008]移动玩具 在一个4*4的方框内摆放了若干个相同的玩具,某人想将这些玩具重新摆放成为他心中理想的状态,规定移动 时只能将玩具向上下左右四个方向移动,并且移动的位置不能有玩 ...

  10. Linux内核分析课程笔记(一)

    linux内核分析课程笔记(一) 冯诺依曼体系结构 冯诺依曼体系结构实际上就是存储程序计算机. 从两个层面来讲: 从硬件的角度来看,冯诺依曼体系结构逻辑上可以抽象成CPU和内存,通过总线相连.CPU上 ...