转自:http://blog.csdn.net/sweetsuzyhyf/article/details/44195549

IScroll.js 最新版本 v5.1.2

修复了输入框无法输入和横向滚动时无法上下滚动页面的问题

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

官网:http://iscrolljs.com

github: https://github.com/cubiq/iscroll/

调用时参数设置:

所属 属性名 说明 默认值
核心库croe options.useTransform 是否使用CSS3的Transform属性 true
options.useTransition 是否使用CSS3的Transition属性,否则使用requestAnimationFram代替 true
options.HWCompositing 是否启用硬件加速 true
options.bounce 是否启用弹力动画效果,关掉可以加速 true
基础特性Basic features options.click 是否启用click事件。建议关闭此选项并启用自定义的tap事件(options.tap) false
options.disableMouse 是否关闭鼠标事件探测。如知道运行在哪个平台,可以开启它来加速。 false
options.disablePointer 是否关闭指针事件探测。如知道运行在哪个平台,可以开启它来加速。 false
options.disableTouch 是否关闭触摸事件探测。如知道运行在哪个平台,可以开启它来加速。 false
options.eventPassthrough 使用IScroll的横轴滚动时,如想使用系统立轴滚动并在横轴上生效,请开启。event passthrough demo false
options.freeScroll 主要在上下左右滚动都生效时使用,可以向任意方向滚动。2D scroll demo false
options.keyBindings 绑定按键事件。Key bindings false
options.invertWheelDirection 反向鼠标滚轮。 false
options.momentum 是否开启动量动画,关闭可以提升效率。 true
options.mouseWheel 是否监听鼠标滚轮事件。 false
options.preventDefault 是否屏蔽默认事件。 true
options.scrollbars 是否显示默认滚动条 false
options.scrollXoptions.scrollY 可以设置IScroll滚动的初始位置 0
options.tap 是否启用自定义的tap事件可以自定义tap事件名 false
滚动条Scrollbars options.scrollbars 是否显示默认滚动条 false
options.fadeScrollbars 是否渐隐滚动条,关掉可以加速 true
options.interactiveScrollbars 用户是否可以拖动滚动条 false
options.resizeScrollbars 是否固定滚动条大小,建议自定义滚动条时可开启。 false
options.shrinkScrollbars 滚动超出滚动边界时,是否收缩滚动条。‘clip’:裁剪超出的滚动条

‘scale’:按比例的收缩滚动条(占用CPU资源)

false:不收缩,

false
  options.indicators 指示IScroll该如何滚动,Scrollbars的底层实现方式。  
options.indicators.el 制定滚动条的容器。容器中的第一个元素即为指示器。例如:

indicators: {

el: document.getElementById(‘indicator’)

}

indicators: {

el: ‘#indicator’

}

 
options.indicators.ignoreBoundaries 是否忽略容器边界。设为true 可以设置滚动速度parallax demo false
options.indicators.listenXoptions.indicators.listenY 指示器监听那个方向的滚动,可以设置为一个方向或2个方向 true
options.indicators.speedRatioXoptions.indicators.speedRatioY 指示器相对主滚动条的速度 0
options.indicators.fadeoptions.indicators.interactive

options.indicators.resize

options.indicators.shrink

如scrollbars的设置minimap demo  
options.probeType 需要使用iscroll-probe.js才能生效probeType:1  滚动不繁忙的时候触发

probeType:2  滚动时每隔一定时间触发

probeType:3  每滚动一像素触发一次

 
分割页面snap options.snap 自动分割容器,用于制作走马灯效果等。Options.snap:true//根据容器尺寸自动分割

Options.snap:el//根据元素分割

false
缩放zoom options.zoom 是否打开缩放最好使用iscroll-zoom.js

如放大模糊,可将源容器定义为2倍大小,然后scale(0.5)

zoom demo

false
options.zoomMax 最大缩放等级 4
options.zoomMin 最小缩放等级 1
options.zoomStart 初始缩放等级 1
options.wheelAction 滚轮动作设为’zoom’,可以用滚轮缩放 undefined
更多设置 options.bindToWrapper 光标、触摸超出容器时,是否停止滚动 false
options.bounceEasing 弹力动画效果预置效果:‘quadratic’, ‘circular’, ‘back’, ‘bounce’, ‘elastic’(最后两个不能通过css3表现)

还可以自定义效果

bounceEasing: {

style: ‘cubic-bezier(0,0,1,1)’,//css3时

fn: function (k) { return k; }//不使用css3,使用requestAnimationFrame时

}

‘circular’
options.bounceTime 弹力动画持续的毫秒数 600
options.deceleration 滚动动量减速越大越快,建议不大于0.01 0.0006
options.mouseWheelSpeed 鼠标滚轮速度  
options.preventDefaultException 列出哪些元素不屏蔽默认事件; {tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }
options.resizePolling 重新调整窗口大小时,重新计算IScroll的时间间隔 60
键位绑定 options.keyBindings 监听按键事件控制IScroll例如:

keyBindings: {

pageUp: 33,

pageDown: 34,

end: 35,

home: 36,

left: 37,

up: 38,

right: 39,

down: 40

}

 

API:

所属 方法名 说明
滚动 scrollTo(x, y, time, easing) 滚动到:x,y,事件,easing方式x:int

y:int

time:int

Easing: quadratic | circular | back | bounce | elastic

见IScroll.utils.ease 对象

例:

myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);

  scrollBy(x, y, time, easing) 滚动到相对于当前位置的某处其余同上
  scrollToElement(el, time, offsetX, offsetY, easing) 滚动到某个元素。el为必须的参数offsetX/offsetY:相对于el元素的位移。设为true即为屏幕中心

scroll to element

分割页面snap goToPage(x, y, time, easing) 根据options.snap分割页面,跳转到横向、纵向某页。XY可以同时生效。结合options.snap使用
next()prev() 上一页,下一页结合options.snap使用
缩放 zoom(scale, x, y, time) 缩放容器Scale:缩放因子
刷新 refresh() 刷新IScroll
销毁 destroy() 销毁IScroll,节省资源
     

事件使用:

beforeScrollStart 用户点击屏幕,但是还未初始化滚动前
scrollCancel 初始化滚动后又取消
scrollStart 开始滚动
scroll 滚动中
scrollEnd 滚动结束
flick 轻击屏幕左、右
zoomStart 开始缩放
zoomEnd 缩放结束

IScroll的属性:

iscroll中文文档的更多相关文章

  1. Phoenix综述(史上最全Phoenix中文文档)

    个人主页:http://www.linbingdong.com 简书地址:http://www.jianshu.com/users/6cb45a00b49c/latest_articles 网上关于P ...

  2. Chart.js中文文档-雷达图

    雷达图或蛛网图(Radar chart) 简介 A radar chart is a way of showing multiple data points and the variation bet ...

  3. Knockout中文开发指南(完整版API中文文档) 目录索引

    a, .tree li > span { padding: 4pt; border-radius: 4px; } .tree li a { color:#46cfb0; text-decorat ...

  4. ReactNative官方中文文档0.21

    整理了一份ReactNative0.21中文文档,提供给需要的reactnative爱好者.ReactNative0.21中文文档.chm  百度盘下载:ReactNative0.21中文文档 来源: ...

  5. java中文文档官方下载

    一直在寻找它,今天无意之间终于发现它了! http://download.oracle.com/technetwork/java/javase/6/docs/zh/api/overview-summa ...

  6. Spring中文文档

    前一段时间翻译了Jetty的一部分文档,感觉对阅读英文没有大的提高(*^-^*),毕竟Jetty的受众面还是比较小的,而且翻译过程中发现Jetty的文档写的不是很好,所以呢翻译的兴趣慢慢就不大了,只能 ...

  7. jQuery 3.1 API中文文档

    jQuery 3.1 API中文文档 一.核心 1.1 核心函数 jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQ ...

  8. jQuery EasyUI API 中文文档 - ComboGrid 组合表格

    jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...

  9. jQuery EasyUI API 中文文档 - ValidateBox验证框

    jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下.   用 $.fn.validatebox.defaults 重写了 d ...

随机推荐

  1. Eclipse安装Activiti插件(流程设计器)

    Eclipse安装Activiti插件(流程设计器) 一.安装步骤: 1,打开Eclipse的 Help -> Install New Software,填上插件地址: Name:Activit ...

  2. 如何打开linux内核中dev_dbg的开关

    比如要打开某个驱动中的dev_dbg,那么需要在驱动文件.c中这些行"<linux/device.h>"或者"<linux /platfom_devic ...

  3. windows环境下mysql的解压安装以及备份和还原

    系统环境为server2012 1.下载mysql解压版,解压安装包到指定目录 2.在以上目录中,复制一份my-default.ini文件,重命名为my.ini,进行如下修改(按照需要): [mysq ...

  4. centos下利用mail命令进行邮件发送

    centos下默认自带mail命令: 可以用如下命令查看存放位置: which mail 结果如下: 如果没有安装可以使用 如下命令安装 yum -y install mailx 利用mail命令进行 ...

  5. windows下Redis主从复制配置(报错:Invalid argument during startup: unknown conf file parameter : slaveof)

    主从复制配置中的遇到的异常: Invalid argument during startup: unknown conf file parameter :  slaveof 把Redis文件夹复制两份 ...

  6. AtCoder Grand Round 012B Splatter Painting

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  7. Markdown锚点使用

    为了使得博客看起来更加美观,我更倾向于使用索引,但是如何在Markdown使用索引跳到指定位置呢?以下是使用方法: 具体应用场景: (1)文献列表中链接--可以通过锚实现页面内的链接:引用文献中可能需 ...

  8. Java MongoDB插入

    前言 插入是向MongoDB中添加数据的基本方法.对目标集使用insert方法来插入一条文档.这个方法会给文档增加一个”_id”属性(如果原来没有的话),然后保存到数据库中. 1.连接数据库,拿到集合 ...

  9. 修改tomcat默认端口号8080

    1.背景 在默认情况下,tomcat的端口是8080,使用了两个tomcat,那么就需要修改其中的一个的端口号才能使得两个同时工作. 2.方法 2.1改动一 那么,如何修改tomcat的端口号呢?首先 ...

  10. OpenGL全景视频

    全景视频其实在实现上和一般的视频播放基本差不多,解码可以用ffmpeg,只是对解码后的图片在绘制的时候要绘制在一个球上(我这里是球,好像有说有的格式要绘制在四面体上的,美做深入研究),而不是画在一个表 ...