iscroll中文文档

转自: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/

调用时参数设置:

所属属性名说明默认值
核心库croeoptions.useTransform是否使用CSS3的Transform属性true
options.useTransition是否使用CSS3的Transition属性,否则使用requestAnimationFram代替true
options.HWCompositing是否启用硬件加速true
options.bounce是否启用弹力动画效果,关掉可以加速true
基础特性Basic featuresoptions.click是否启用click事件。建议关闭此选项并启用自定义的tap事件(options.tap)false
options.disableMouse是否关闭鼠标事件探测。如知道运行在哪个平台,可以开启它来加速。false
options.disablePointer是否关闭指针事件探测。如知道运行在哪个平台,可以开启它来加速。false
options.disableTouch是否关闭触摸事件探测。如知道运行在哪个平台,可以开启它来加速。false
options.eventPassthrough使用IScroll的横轴滚动时,如想使用系统立轴滚动并在横轴上生效,请开启。event passthrough demofalse
options.freeScroll主要在上下左右滚动都生效时使用,可以向任意方向滚动。2D scroll demofalse
options.keyBindings绑定按键事件。Key bindingsfalse
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
滚动条Scrollbarsoptions.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 demofalse
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  每滚动一像素触发一次

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

 

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

false
缩放zoomoptions.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.010.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

分割页面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的属性:

转载于:https://www.cnblogs.com/lcyuhe/p/5486632.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值