iscroll 使用及遇到的问题

介绍：

iscroll.js 是滑动事件。在手机上可以快速的滑动，用户体验很好。在线例子： 选择套餐  

iScroll必须在调用之前实例化---用法

<script src="iscroll.js"></script>

<script>

　　function authload(){
　　　　myScroll_left = new IScroll('#left_Menu', { mouseWheel: true, click: true,checkDOMChanges:true });
　　　　myScroll_right = new IScroll('#right_Menu', { mouseWheel: true, click: true,checkDOMChanges:true,bounce:false });
　　}
　　window.onload=function(){
　　　　authload();
　　}

</script>

 iScroll里传递的参数：

　iScroll里的第二个参数允许你自定义一些内容，比如下面的这段代码：      

<script>
      var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});
</script>

 　　第二个参数通常都是一个对象，像上面的这个例子里就设定了不显示滚动条。常用的参数如下：
               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）

　　　　　 checkDOMChanges: false, //是否自动检测内容变化  

通用方法：

（1）refresh 在DOM树发生变化时，应该调用此方法。

 setTimeout(function () { myScroll.refresh(); }, 0);

DOM树发生变化,会自动更新列表   checkDOMChanges:true  例子如下：

var myScroll_left = new IScroll('#left_Menu', { mouseWheel: true, click: true,checkDOMChanges:true });

注：使用该方法的时候，需要在页面中返回成功的函数里使用。（需后台人员配合）

$.post(url, { id:id}, function(data){
　　　　　　　　var myScroll_left = new IScroll('#left_Menu', { mouseWheel: true, click: true,checkDOMChanges:true });

　　　　　　　　myScroll_right.scrollTo(0,0);

} );

（2）iScroll还提供了scrollTo, scrollToElement和scrollToPage三个方法让你能够通过javascript来控制滚动效果。

scrollTo(x, y, time, relative)：在指定的time时间内让内容滚动条x/y的位置。

如myScroll.scrollTo(0, -100, 200) 在200毫秒内Y轴向下滚动100像素。 myScroll.scrollTo(0, 10, 200, true)可以实现相对当前位置在200毫秒内Y轴向上滚动10像素的效果。

例子：

var myScroll_left = new IScroll('#left_Menu', { mouseWheel: true, click: true,checkDOMChanges:true });
//滚动至顶部
myScroll_left.scrollTo(0,0);

scrollToElement(element, time)：在指定的时间内滚动到指定的元素。如 :

 myScroll.scrollToElement('li:nth-child(10)', 100); 
//在100毫秒内滚动到第10个li元素的位置。第1个参数可以用CSS3中的选择器来筛选元素。

 

snapToPage(pageX, pageY, time)：在200毫秒内从第1页滚动到第2页（0代表第1页，1代表第2页）。这个使用SNAP功能的时候可以调用这个函数。

（3）detroy() 完全消除myscroll及其占用的内存空间

myscroll.destroy();
myScroll = null;

-----------参考网址-----------------

 

iScroll.js 用法参考 （share）