iscroll.js参数设置及API

参数设置

核心库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
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 的设置
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)	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 即为屏幕中心
分割页面	snap goToPage(x, y, time, easing) 根据 options.snap 分割页面，跳转到横向、纵向某页。 XY 可以同时生效。 结合 options.snap 使用
分割页面	next()	下一页结合 options.snap 使用
分割页面	prev()	上一页结合 options.snap 使用
缩放	zoom(scale, x, y, time)	缩放容器Scale: 缩放因子
刷新	refresh()	刷新 IScroll
销毁	destroy()	销毁 IScroll ，节省资源

事件使用

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

IScroll的属性

属性名	说明
myScroll.x/y	当前位置
myScroll.directionX/Y	上一次的滚动方向 (-1 下 / 右 , 0 保持原状 , 1 上 / 左 )
myScroll.currentPage	当前 Snap 信息
myScroll.maxScrollXmyScroll.maxScrollY	当滚动到底部时的 myScroll.x/y