1,、下载iscroll.js
一定要 在官网http://iscrolljs.com/下载,
···
我就遇到一个很奇葩的问题,导致初始化失败,一开始没往插件问题方面想。
因为querySelect or是javascrip的方法,按理说没问题,搞了半天,问了大神,大神也说不知道,可能是插件有问题。
结果换了一个真的好了。
。。。。。。
PS:
Cannot read property 'children' of null at object.Iscroll
iscroll无法获取子元素。
以上的说法是错误的。。。。
原来我第一次下载的是isroll5, iscroll5 采用的是 querySelector() 获取元素。
第二次下载的是 iscroll4, iscroll4, 用的是 geElementById()获取元素。
至于我电脑使用的谷歌浏览器,手机浏览器,绝对是都兼容的。
但是为什么geElementById() 可以获取到,querySelector()获取不到,这个就不知道了。汗!!!
还是想用iscroll5的话,可以修改源码。
2.引进
想引用普通的js文件那样。<script src="__PUBLIC__/tools/branchandbee/iscroll.js?ver=8"></script>
3.使用
<div id="wrapper"> <ul> <li></li> ... </ul> </div>
如上面的结构,
global.myscroll=new iScroll("wrapper",{});document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);如果你是这样初始化,意味着 ul 是滚动层。从上面的源码可以发现,iscroll是选取id的第一个子元素作为滚动层的。所以呢,如果想让更多元素滚动,可以这样<div id="wrapper"> <div id="scroller"> <ul> <li></li> ... </ul> <ul> <li></li> ... </ul> </div> </div>
第二个参数是一个json对象,可以指定一些信息。hScroll false 禁止横向滚动 true横向滚动 默认为true vScroll false 精致垂直滚动 true垂直滚动 默认为true hScrollbar false隐藏水平方向上的滚动条 vScrollbar false 隐藏垂直方向上的滚动条 fixedScrollbar 在iOS系统上,当元素拖动超出了scroller的边界时,滚动条会收缩,设置为true可以禁止滚动条超出 scroller的可见区域。默认在Android上为true, iOS上为false fadeScrollbar false 指定在无渐隐效果时隐藏滚动条 hideScrollbar 在没有用户交互时隐藏滚动条 默认为true bounce 启用或禁用边界的反弹,默认为true momentum 启用或禁用惯性,默认为true,此参数在你想要保存资源的时候非常有用 lockDirection false取消拖动方向的锁定, true拖动只能在一个方向上(up/down 或者left/right)所以一般初始化是这样子的。隐藏掉滚动条。var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});
4.注意事项
当有异步加载dom元素的时候,或者js改变dom, 等dom发生改变的的时候,必须使用iscroll.refresh().方法。
5.结语
5.结语
现在感觉最iscroll最大的作用就是使移动端的 fixed真正能够固定,特别是ios系统。
以上初次使用的心得,等使用到那些事件,方法的时候在继续补充,谨以此给新手一点帮助。