list-iscroll5.2

简介

 

iScroll是一个高性能，资源占用少，无依赖，多平台的JavaScript滚动插件。

它可以在桌面，移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。

iScroll不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll，你的项目便拥有了滚动，缩放，平移，无限滚动，视差滚动，旋转功能。给它一个扫帚它甚至能帮你打扫办公室。

即使平台本身提供的滚动已经很不错，iScroll可以在此基础上提供更多不可思议的功能。具体来说：

  • 细粒度控制滚动位置，甚至在滚动过程中。你总是可以获取和设置滚动器的x，y坐标。
  • 动画可以使用用户自定义的擦出功能（反弹'bounce'，弹性'elastic'，回退'back'，...）。
  • 你可以很容易的挂靠大量的自定义事件（onBeforeScrollStart等)
  • 开箱即用的多平台支持。从很老的安卓设备到最新的iPhone，从Chrome浏览器到IE浏览器。
 

iScroll版本

目前有以下版本：

  • iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。
  • iscroll-lite.js，精简版本。它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案。
  • iscroll-probe.js，探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。（我正在做更多的测试,这可能最终在常规iscroll.js脚本，请留意）。
  • iscroll-zoom.js，在标准滚动功能上增加缩放功能。
  • iscroll-infinite.js，可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。

使用方法

1、HTML

尽可能保持DOM结构的简洁。iScroll使用硬件合成层但是有一个限制硬件可以处理的元素。最佳的HTML结构如下：

<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>

在上面的例子中，只有UL容器元素的第一个子元素LI 能进行滚动（已亲测），其他子元素完全被忽略。——iScroll作用于滚动区域的外层。

如果你想要更多的元素的LI 可以滚动，那么你可以用下面的这种写法：

 

<div id="wrapper">
    <div id="srcoller">
        <ul>
            <li>...</li>
            <li>...</li>
            ... //这里是内容，scroller高于一定大于wrapper高度，wrapper为滚动区域scroller为滚动内容。
        </ul>
    </div>
</div>

 

 

2、调用

最基本的脚本初始化的方式如下：

 
 

<script type="text/javascript" src="iscroll.js"></script> <script type="text/javascript"> var myScroll = new IScroll('#wrapper',{

mouseWheel: true, //开启鼠标滚轮支持 scrollbars: true //开启滚动条 }); </script>

 
注意，iScroll使用的是querySelector 而不是 querySelectorAll，所以iScroll只会作用到选择器选中元素的第一个。如果你需要对多个对象使用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的属性：

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

官网：http://iscrolljs.com/

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

更多参数：http://wiki.jikexueyuan.com/project/iscroll-5/ 

                 https://segmentfault.com/a/1190000003113280

posted @ 2016-12-12 20:11  爱博子  阅读(1043)  评论(0)  编辑  收藏  举报