iscroll 可以做的
1,模拟原生的ios 或者android等设备的元素滚动，app里的那种顺滑的滚动，仅仅使用一个轻量的js库实现(甚至更酷炫的视觉感受)
2,手机端流行的下拉刷新,ajax异步加载 无限滚动 视差滚动等
3.同时可以做水平方向上的轮播,手势滑动，借由捕捉dom元素分页显示
...
初始化 initialize 初始化要滚动内容的可视区域容器 推荐使用尽可能简单的dom结构,
即
1 <div id="wrapper"> 2 <div class="the_container 这里是手指滑动的内容区域的容器" >...</div> 3 <div class="the_container2 此div 和它的内容将会被IScorll忽略"></div> 4 </div>
1 <script type="text/javascript"> 2 var myScroll = new IScroll('#wrapper'); 3 </script>
note:
初始化脚本只会关心wrapper下的第一个子元素,将它视为可滚动的元素
但是一个页面wrapper元素本身可以有多个 比如使用 #wrapper #wrapper2 .wrapper选择器初始化容器,支持这样的多个滚动区域
iscroll的相关配置参数可以在初始化方法中通过第二个对象参数传递
如：
1 var myScroll = new IScroll('#wrapper', { 2 mouseWheel: true, 3 scrollbars: true 4 });
初始化之后可以也可以使用它的实例的options 对象设置
如：
1 myScroll.options.xxx
Iscroll相关方法：
滚动到任意位置 scrollTo(x, y, time, easing)
如：
myScroll.scrollTo(0, -100); //向下滚100像素
note:
easing 动画效果(可选项)使用Scroll.utils.ease对象下定义的效果( quadratic, circular, back, bounce, elastic(弹性滚动))
time 耗费时间(可选项)
如：
myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);
scrollBy(x, y, time, easing) 这个方法和上面的基本相同,不过x,y是相对定位的(relative;)
滚动到指定的某元素位置那儿
scrollToElement(el, time, offsetX, offsetY, easing)
如：
1 myScroll.scrollToElement(document.querySelector('#scroller li:nth-child(10)'))" //滚动到第10个元素(第10个元素在wrapper顶部) 2 3 myScroll.scrollToElement(document.querySelector('#scroller li:nth-child(25)'), null, null, true); //滚动第25个元素 (第二个元素在wrapper中部) 4 5 myScroll.scrollToElement(document.querySelector('#scroller li:nth-child(50)'), 1200, null, null, IScroll.utils.ease.elastic) //滚动到第50个元素
分隔滚动内容区域(捕捉元素)(iscroll的一大特色,亮点功能)
options.snap 可选项 snap: true snap:'li'
如：
var myScroll = new IScroll('#wrapper', {
snap: 'li'
});
note:
捕捉到元素之后就有一系列有趣的方法可用
goToPage(x, y, time, easing) x y是对于水平和垂直的轴来定义的
如：
myScroll.goToPage(10, 0, 1000); 在一秒内在水平方向上翻动10页
next()
prev() //基于当前位置翻页
记得应该引入iscroll-zoom.js （缩放）
1 options.zoom (默认 false) 设置为true 2 options.zoomMax (默认 4) 3 options.zoomMin (默认 1) 4 options.zoomStart (默认 1) 5 options.wheelAction (默认 undenfined) 可设置为zoom 代替默认的滚动功能而改为缩放 6 zoom(scale, x, y, time) x y定义滚动的基于的中心,不设置将会基于屏幕中心 time执行的毫秒
刷新 refresh()
ajax的回调处理函数里设置一下延时(因为加入新的dom元素后iscroll需要一点重新计算然后让页面渲染的时间)
还有一些情况也需要iscroll来重新计算,比如结合bootstrap的tab页插件时,每个标签页一个iscroll实例,这时需要在dom渲染完成后
setTimeout(function () {myScroll.refresh();}, 0); (官方的意见是这种等待时间即便是加个0也比不加强多了)
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
iscroll_vertical_flowers.refresh();
});
销毁destroy()
1 myScroll.destroy(); 2 myScroll = null; //使用这两行代码释放iscroller占用的内存,当不再使用时
可用事件:
beforeScrollStart
scrollCancel
scrollStart
scroll note: 滚动中的事件监听 只有Iscroll 5的probe.js版本才支持
scrollEnd
flick
zoomStart
zoomEnd
注册事件( on(type, fn) )如：
1 myScroll = new IScroll('#wrapper'); 2 myScroll.on('scrollEnd', function(){});
可用属性:
myScroll.x/y 当前位置
myScroll.directionX/Y 上一次的滚动方向(-1 下/右, 0 保持原状, 1 上/左)
myScroll.currentPage 当前Snap信息
myScroll.maxScrollXmyScroll.maxScrollY 当滚动到底部时的 myScroll.x/y
iscroll 使用的核心技术:
css3的 transform(2d,3d转换) transform有四个常用方法：旋转rotate()、缩放scale()、移动translate()、 倾斜skew()
note:
iscroll 启用/禁用transform 通过 options.useTransform
(默认为true,若设为false,官方文档称你会感觉你一下回到了2007年,因为那时候css没有transform技术)
由于在ie上会使用top left,作兼容处理方案 此时scroller(wrapper的第一个子元素,所有滚动的内容区域的容器)需要设置为position:absolute;
css3的 transition(过渡) 一段时间内元素从某样式变为某样式
iscroll使用 transition技术执行csss3的animation(动画)
主要是两种预先定义的动画 momentum(拖动惯性) 和 bounce(超过反弹)
options.useTransition (默认为true)
设置为false,用来代替的 requestAnimationFrame 会被执行
options.HWCompositing
使用硬件加速 (默认为true,如果需要更侧重稳定性可以关掉,可减低手机上xxx意外停止的机率)
options.bounce (默认为true)
单独设置false可禁用超过反弹
options.click (默认为false)
iscorll默认禁用了滚动区域的一些默认行为 比如点击事件
如果你希望你的脚本响应滚动区域内的点击事件 可设置为true开启响应点击事件
官方推荐手机端不要使用点击事件而使用触摸行为的tap事件代替,因为执行效率要高很多
options.disableMouse
options.disablePointer
options.disableTouch (默认 false)
note:
iscroll默认会同时监听 鼠标 指针 手指触摸事件,以兼容pc tablet mobile, 但是他们同时觉得这种做法有些浪费内存占用,
所以它建议如果你用时如果有明确的针对设备时,禁用掉不必要的监听以提高效率吧
options.eventPassthrough (默认 false)
有时你既要用到垂直滚动又要用到水平方向的滚动,将此值设为true
或设置为 'horizontal'将替换(iscroll的垂直滚动或原生的水平滚动)
options.freeScroll (默认 false)
这个选项主要在2d的滚动时很好用 当你的滚动区域既要水平方向和垂直滚动时,
不过效果感觉并不好,就像用地图应用的那种随便拖动的感觉
options.keyBindings (默认false)
激活键盘接收
options.invertWheelDirection (默认false)
反转鼠标方向,前提是支持mouse wheel
options.momentum (默认 true)
设置 是否启用拖动惯性
options.mouseWheel (默认 false)
是否监听鼠标事件
options.preventDefault (默认 true)
官方警告你除非你真的理解你在做什么否则不要瞎设
options.scrollbars (默认 false)
展示或者不展示滚动条
options.scrollX (默认 false)
options.scrollY (默认 ture)
默认只有垂直滚动,如果你需要水平方向上的滚动你需要设置scrollX为true
使用时可按需要开一个关一个
options.startX options.startY (默认 0)
默认scroller(内容区域)在 wrapper的左上角(0,0)位置 你可以设置此初始位置
options.tap (默认false)
设置这个选项可以在用户点击了触发了tap事件却没有滚动时 iscroll仍然能够监听到
标准的增加监听事件的代码为
1 element.addEventListener('tap', doSomething, false); \原生js(Native) 2 $('#element').on('tap', doSomething); \ (jquery语法)
options.fadeScrollbars (默认 false)
设置为true时 启用渐隐式的滚动条(滚动条会在不滚动时自动隐藏)
options.interactiveScrollbars(默认 false)
可拖拽的的滚动条
options.resizeScrollbars (默认 true)
滚动条的尺寸的基于wrap的宽度/scroller的高度
options.shrinkScrollbars (默认 false)
可设的值 'clip' 'scale'
设置后当滚动区域超出是滚动条变短一点点
options.bindToWrapper (默认 false)
默认当你手指离开滚动内容区域后 滚动手指仍然会进行内容滚动,这通常来说很好用 不过你也可以把鼠标或者手指的监听不绑定到document上
而仅仅绑定到wrapper上,这样离开滚动区域将不会再滚动
options.bounceEasing (默认 circular)
note:
可设置(超出反弹的动画) 'quadratic', 'circular', 'back', 'bounce', 'elastic'
如果你不想要上面的几种效果,同时也支持以下面这种方式定制个人动画
1 bounceEasing: { 2 style: 'cubic-bezier(0,0,1,1)', 3 fn: function (k) { return k; } 4 }
options.bounceTime (默认 600)
反弹动画的执行时间 (以毫秒为单位)
options.deceleration (默认 0.0006)
拖动惯性的减速选项 数值越大执行时间越短 如果你要改变推荐的选择是0.01,
比这个数值再大一点基本上就感觉不到有拖动惯性的减速运动了
options.mouseWheelSpeed (默认 20)
设置鼠标滚轮的速度 (这个不好描述,具体要设置多快自己去改数值试试就知道了)
options.preventDefaultException (默认 { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ })
如果你不想在所有元素上禁止浏览器默认会发生的操作 比如点a标签的跳转 页面的移动
可这样设置： preventDefaultException: { className: /(^|s)formfield(s|$)/ }
options.resizePolling (默认 60)
当你改变浏览器窗口大小后(比如pc浏览器鼠标拖动了窗口大小),iscroll 需要重新计算位置和尺寸
进行这种一旦改变后重新计算的轮询 间隔为60毫秒