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)

通用方法:

(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)

时间: 2024-10-12 09:55:29

iscroll 使用及遇到的问题的相关文章

运用iscroll.js遇到的问题

1.无法滑动的问题 需要检查iscroll.js文件加载上没有,如果加载上检查一下它和jquery文件加载的先后顺序.wrapper的position必须得写,bottom也必须得写. 2.滑不上去的问题 wrapper的height设置成了100%.所以出现这个问题,把这个属性去掉了好了 3.页面滑动不流畅(这样是暂时行可以,还没找到更好的解决办法)  #scroller {        transform: translate3d(0,0,0);        -webkit-transf

iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼的问题,给点提示 :#wrapper,以及#scroller-content要注意) html如下: <div class="viewport"> <div id="wrapper" class="wrapper"> <

IScroll介绍--案例

一.下面简单介绍一下iScroll: iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件. 它可以在桌面,移动设备和智能电视平台上工作.它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验. iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.给它一个扫帚它甚至能帮你打扫办公室. 即使平台本身提供的滚动已经很不错,iSc

iscroll的进阶问题

关于iscroll的进阶问题 刚开始使用Iscroll的时候会遇到好多问题,其实大部分都是缺少配置参数.这些配置参数可以解决好多问题. 但是有一种的是关于页面加载的. 比如说 刚打开页面的时候 你的页面可以正常进行滑动 当你的页面再次刷新 或者跳转的时候 并不能滑动. 所以 你需要 让他页面加载完毕的时候  在此执行那段js代码. var myScroll; function loaded() { setTimeout(function () { myScroll = new IScroll('

iScroll.js 向上滑动异步加载数据回弹问题

iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ 下面是按照官网给的Demo,写的一个异步加载数据实例: 1 <title>iScroll demo: click</title> 2 <script src="~/Scripts/iscroll5/jquery-1.10.2.js"></scrip

基于iscroll实现下拉和上拉刷新

http://www.zhangyunling.com/359.html 重要提示 本插件已经经过更新,查看更新的插件代码,以及介绍请查看:基于iscroll实现下拉和上拉刷新(优化); 在原生APP的开发中,有一个常见的功能,就是下拉刷新的功能,这个想必大家都是知道的,但是原生APP的开发,有一个很大的问题就是,你每次更新一些功能,就要用户重新下载一次版本,尤其是在IOS系统中,新版本还需要经过审核才能通过,这就使得版本的更新受到很大的限制,而如果我们改用网页来展示,那么只要改变服务器中网页的

IScroll的诞生和缺点

转自http://lhdst-163-com.iteye.com/blog/1239784 iscroll.js是Matteo Spinelli开发的一个js文件,使用原生js编写,不依赖与任何js框架.旨在解决移动webkit系浏览器的区域滚动问题,兼容mobile safari.Android默认浏览器.safari.chrome.firefox5+.opera11+.IE9+及其他webkit核心浏览器.最新版本为iscroll4. 官方网站:iscroll4 iscroll的用武之地 1

项目小结一:在项目中使用 IScroll 所碰到的那些坑

最近做了个 WEB APP 项目,用到了大名鼎鼎的 IScroll,滚动的效果的确很赞,但是坑也是特别多,下面总结一下,希望自后来者有帮助. 该项目现已开源在 github 上,https://github.com/ansiboy/ChiTuStore 一. 使用 abstract 定位 顶栏和底栏最好不要使用 fixed 定位,应该使用 abstract 定位.我最初使用的是 fixed 定位,页面从右往左呈现的时候,经常会出现两个问题:1.顶栏时不时地会消失掉,2.新页面在移动的过程中,顶栏

iScroll学习笔记2--浅读源码

iscroll的架子是这样的 (function (window, document, Math){ var utils = (function (){ var me = {}; // 扩展一些常用的工具方法为me的方法 return me; }()); function IScroll(el, options){ // 初始化一些属性和状态 } IScroll.prototype = { constructor: IScroll, // 主体方法都在这里 } }(window, documen

iScroll学习笔记

背景: 都说iScroll是移动端开发必学的库之一,先来看看为啥要用iScroll.网上找了找资料,总结下原因如下: 1.position:fixed 在移动端浏览器上的兼容性不好 简单列举如下: IOS的Safari : IOS5及以后的版本支持该属性, IOS4及以下会把它当成默认的 position: static, 跟着页面一起滚动 Android : Android 2.1及以下不支持 Android 2.2会在滚动完成之后把定位的元素拉回到原来的位置 Android 2.3 只有在禁