s

IScroll之使用 转

发表于 | 分类于 ， ， | 浏览 次

基础调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 const  myScroll = new IScroll("#wrapper",{
        probeType: 3,
//      momentum: false,//关闭惯性滑动
        mouseWheel: true,//鼠标滑轮开启
        scrollbars: true,//滚动条可见
        fadeScrollbars: true,//滚动条渐隐
        interactiveScrollbars: true,//滚动条可拖动
        shrinkScrollbars: 'scale', // 当滚动边界之外的滚动条是由少量的收缩
        useTransform: true,//CSS转化
        useTransition: true,//CSS过渡
        bounce: true,//反弹
        freeScroll: false,//只能在一个方向上滑动
        startX: 0,
        startY: 0,
//      snap: "li",//以 li 为单位
    });
    myScroll.on('scroll',function(){});
    myScroll.on("scrollEnd",function(){});
    document.addEventListener('touchmove', function (e) {
        e.preventDefault();
    }, false);

参数属性

所属属性名说明默认值
核心库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 bindings false
options.invertWheelDirection反向鼠标滚轮。false
options.momentum是否开启动量动画，关闭可以提升效率。true
options.mouseWheel是否监听鼠标滚轮事件。false
options.preventDefault是否屏蔽默认事件。true
options.scrollbars是否显示默认滚动条false
options.scrollXoptions.scrollY可以设置是否显示横向或纵向滚动条scrollX  falsescrollY  true
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.interactiveoptions.indicators.resizeoptions.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 demofalse
options.zoomMax最大缩放等级4
options.zoomMin最小缩放等级1
options.startZoom初始缩放等级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

分割页面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，节省资源