IScroll5 参数说明和调用方法

IScroll.js 最新版本 v5.1.2

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

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

官网：http://iscrolljs.com

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

 

 

调用时参数设置：

所属属性名说明默认值核心库croeoptions.useTransform是否使用CSS3的Transform属性trueoptions.useTransition是否使用CSS3的Transition属性，否则使用requestAnimationFram代替trueoptions.HWCompositing是否启用硬件加速trueoptions.bounce是否启用弹力动画效果，关掉可以加速true基础特性Basic featuresoptions.click是否启用click事件。建议关闭此选项并启用自定义的tap事件（options.tap）falseoptions.disableMouse是否关闭鼠标事件探测。如知道运行在哪个平台，可以开启它来加速。falseoptions.disablePointer是否关闭指针事件探测。如知道运行在哪个平台，可以开启它来加速。falseoptions.disableTouch是否关闭触摸事件探测。如知道运行在哪个平台，可以开启它来加速。falseoptions.eventPassthrough使用IScroll的横轴滚动时，如想使用系统立轴滚动并在横轴上生效，请开启。event passthrough demofalseoptions.freeScroll主要在上下左右滚动都生效时使用，可以向任意方向滚动。2D scroll demofalseoptions.keyBindings绑定按键事件。Key bindingsfalseoptions.invertWheelDirection反向鼠标滚轮。falseoptions.momentum是否开启动量动画，关闭可以提升效率。trueoptions.mouseWheel是否监听鼠标滚轮事件。falseoptions.preventDefault是否屏蔽默认事件。trueoptions.scrollbars是否显示默认滚动条falseoptions.scrollXoptions.scrollY可以设置IScroll滚动的初始位置0options.tap是否启用自定义的tap事件可以自定义tap事件名false滚动条Scrollbarsoptions.scrollbars是否显示默认滚动条falseoptions.fadeScrollbars是否渐隐滚动条，关掉可以加速trueoptions.interactiveScrollbars用户是否可以拖动滚动条falseoptions.resizeScrollbars是否固定滚动条大小，建议自定义滚动条时可开启。falseoptions.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 demofalseoptions.indicators.listenXoptions.indicators.listenY指示器监听那个方向的滚动，可以设置为一个方向或2个方向trueoptions.indicators.speedRatioXoptions.indicators.speedRatioY指示器相对主滚动条的速度0options.indicators.fadeoptions.indicators.interactive

options.indicators.resize

options.indicators.shrink

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

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

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

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

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

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

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

zoom demo

falseoptions.zoomMax最大缩放等级4options.zoomMin最小缩放等级1options.zoomStart初始缩放等级1options.wheelAction滚轮动作设为’zoom’，可以用滚轮缩放undefined更多设置options.bindToWrapper光标、触摸超出容器时，是否停止滚动falseoptions.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弹力动画持续的毫秒数600options.deceleration滚动动量减速越大越快，建议不大于0.010.0006options.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

分割页面snapgoToPage(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的属性：

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

转载请注明：jquery ajax教程网 » IScroll5 参数说明和调用方法