iScroll-js—“smooth scrolling for the web”
原文地址:
一、什么是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”的更多相关文章
- iScroll.js 用法参考 (share)
分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍清楚了.如果你英文比较好的话,可以看看官网的资料 ...
- 基于iscroll.js实现下拉刷新和上拉加载特效
现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...
- iScroll.js 用法参考
本文原文链接:http://www.cnblogs.com/duanhuajian/archive/2013/04/08/3008323.html 概要 iScroll 4 这个版本完全重写了iScr ...
- iScroll.js插件使用方法
iScroll.js 用法参考 (share) 分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍 ...
- iscroll.js 用法介绍
iscroll-5中文文档:http://wiki.jikexueyuan.com/project/iscroll-5/ 概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码. ...
- iscroll.js的简单使用方法
参考链接:https://www.cnblogs.com/Renyi-Fan/tag/js%E6%8F%92%E4%BB%B6/default.html?page=2 目录 一.总结 一句话总结:Sc ...
- iScroll.js的用法
概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码.这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用)提供了一 ...
- iscroll.js 下拉刷新和上拉加载
html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- jquery——移动端滚动条插件iScroll.js
官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ ...
随机推荐
- 自制Console线(已测试CISCO3560可用)
D9的顺序是5口在上,4口在下.从右到左分别是1-5,6-9. 5 4 3 2 1 o o o o o o o o o 9 8 7 6 用万用表量出D9的口的对应颜色.然后按照下面的表.把颜色填写上. ...
- 打开 Mac OS X 隐藏的用户资源库文件夹的方法
在较高版本的 Mac OS X 中,用户的资源库文件夹(/Users/username/Library)默认被系统隐藏了,从 Finder 窗口中不能直接打开. 但是通过下面这个方法可以快速打开用户资 ...
- 【MongoDB】windows平台搭建Mongo数据库复制集(类似集群)(转)
原文链接:[MongoDB]windows平台搭建Mongo数据库复制集(类似集群)(一) Replica Sets(复制集)是在mongodDB1.6版本开始新增的功能,它可以实现故障自动切换和自 ...
- 十五、EnterpriseFrameWork框架核心类库之系统启动入口与初始化
本章内容是讲三种开发模式,web模式.Winform模式和Wcf模式的系统启动入口有什么区别,以及启动后系统初始化的内容:为什么要把这些单独提出来讲一章,因为我觉得本章非常重要,我们都知道程序中的ma ...
- HTML5[6]:多行文本显示省略号
CSS3新增text-overflow: ellipse; 只支持单行文本 如果是多行文本, 在无法完全显示的情况下,可以按下面这样写: overflow:hidden; display: -webk ...
- LeetCode-304. Range Sum Query 2D - Immutable
Description: Given a 2D matrix matrix, find the sum of the elements inside the rectangle defined by ...
- EPANET中读取INPUT文件的函数文件——INPUT3.C
/* ********************************************************************** INPUT3.C -- Input data par ...
- BABOK2主要概要输入输出图
- 第十一篇 SQL Server代理维护计划
本篇文章是SQL Server代理系列的第十一篇,详细内容请参考原文 在这一系列的上一篇,我们看了使用代理帐户模仿Windows安全上下文完成作业步骤的工作.大多数子系统支持代理账户,同时子系统限制代 ...
- Websocket 概述
WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duplex). [[ from websocket是什么原理? ]] 一.WebSocke ...