`
fph888
  • 浏览: 5436 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

iScroll

阅读更多
概要

iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用)
提供了一种本地化的方式来对一个限定了高度和宽度的元素的内容进行滑动。很不幸的是,这种情况下所有的web应用的页面就不能够包含具有position:absolute的头、页尾或者是一个内容可滚动的
中间区域。

然而,Android系统最新修订版已经可以支持这种功能了(尽管支持的力度还不是特别好),Apple公司似乎不太情愿将one-finger滑动事件运用到div元素上。

除了以前版本的iScroll的特性以外,iScroll 4还包括如下的特性:

     (1)缩放(Pinch/Zoom)

    (2)拉动刷新(Pull up/down to refresh)

    (3)速度和性能提升

    (4)精确捕捉元素

    (5)自定义滚动条

      友情提示:iScroll 4并不是iScroll 3的简易替代版本,API文档已经不一样了。同时考虑到此版本正处于测试期,一些API可能会有细微的变化。

使用指南

在此文档中你会发现很多例子来教会你如何快速上手iScroll脚本库。参看文中的demo小例子并仔细阅读此文档,可能有点小无聊,但是这篇文章中却是iScroll这个脚本库的精髓之所在哦。

iScroll需要对所要进行滚动的元素进行初始化,并且不限定一个页面中使用iScroll的元素的个数(这里不考虑您的硬件配置)。滚动元素中内容的类型和长度在一定程度上将会影响iScroll脚本库里
可以同时使用的元素的个数。

使用iScroll这个脚本库时,DOM树的结构要足够简单,移除不必要的标签,尽量避免过多的标签嵌套使用。

最优的使用iScroll的结构如下所示:

<div id="wrapper">

        <ul>

               <li></li>

               .....

        </ul>

</div>

在这个小例子中,ul标签将会被滚动。iScroll一定要与滚动内容外面的wrapper进行联系才会产生效果。

【注意事项】:

只有wrapper里的第一个子元素才可以滚动,如果你想要更多的元素可以滚动,那么你可以试试下面的这种写法:

<div id="wrapper">

        <div id="scroller">

               <ul>

                    <li></li>

                     ...

                </ul>

                <ul>

                         <li></li>

                          ...

                </ul>

       </div>

</div>

在这个例子中,scroller这个元素可以滚动,即便它包含两个ul元素

iScroll必须在调用之前实例化,你可以在下面几种情况下对iScroll进行实例化:

    (1)onDOMContentLoaded

    (2)onLoad

    (3)以内联inline方式

下面我们逐个来讲讲这三种用法的优缺点

ONDOMContentLoaded

        适用于滚动内容只包含文字、图片,并且所有的图片都有固定的尺寸

        使用方法:(在head标签中添加如下代码)

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

        <script>

                 var myscroll;

                function loaded(){

                           myscroll=new iScroll("wrapper");

                 }

               window.addEventListener("DOMContentLoaded",loaded,false);

         </script>

         注意:myscroll这个变量是全局的,因此你可以在任何地方调用它的函数onLoad

        有些时候在DOMContentLoaded的状态下就初始化iScroll其实是有点草率的,因此此时页面的资源可能还没有全部加载完毕。如果你遇到了一些很怪异的行为可以试试下面的写法:

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

        <script>

                    var myscroll;

                    function loaded(){

                   setTimeout(function(){

                            myscroll=new iScroll("wrapper");

                     },100 );

                }

                window.addEventListener("load",loaded,false);

         </script>

         这种情况下iScroll会在页面资源(包括图片)加载完毕100ms之后得到初始化,这应该是一种比较安全的调用iScroll的方式。

inline初始化


         这种情况会在页面加载到js的时候就进行调用,此方法不推荐使用,但是很多javascript的大牛都在用这种方式,我又有什么理由不赞成呢?

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

                    <div id="wrapper">

                            <ul>

                                <li></li>

                                 ...

                          </ul>

                  </div>

        <script>

                   var myscroll=new iScroll("wrapper");

        </script>

        不过建议你使用一些框架的ready方法来安全调用iScroll(比如jquery里的ready())。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)

                为了保持资源的完整性,建议去除滚动条拉动刷新(pull to refresh)

        自从Twitter和一些Apple的本地化应用出现了这个效果之后,这个效果就变得非常流行。你可以看看这儿先一睹为快。

       我最近把"pull to refresh"这个部分单分出来作为iScroll的一个额外插件。你可以点击这儿看看pull to refresh是如何工作滴。你只需要做的就是自定义pullDownAction()这个方法。你可能需要一个ajax来加载新的内容,不过一旦DOM树发生了变化要记得调用refresh这个方法来。需要记住的是在例子中我们加了1秒的延迟来模拟网络的延迟效果。当然,如果你不想使用这个延迟,那就把setTimeout方法去掉就行了。



缩放(pinch / zoom)

        我们不得不面对一个事实,那就是光有滚动其实没什么新意的。这就是为什么在iScroll 4这个版本里我们允许你可以放

        大和缩小。想要这个功能,只需要设置放大的参数zoom 为true即可实现利用手势来放大和缩小。你可以看看这儿。

        双击放大和缩小的功能在iScroll 4里也是得到支持的。要使用缩放功能,你至少需要如下配置:

                var myScroll =new iScroll("wrapper",{zoom:true});

       如果你想对缩放功能进行深度的自定义的话可以使用下面的一些选项:

               zoomMax   指定允许放大的最大倍数,默认为4

      【注意事项】:如果想要图片缩放的效果很好的话要把他们放到硬件的合成层中。通俗点说,就是在所有需要缩放的img元素上使用-webkit-transform:translate3d(0,0,0)来实现,而且尤为重要的是,硬件的加速会占用大量资源,要谨慎使用,否则你的应用可能就此崩溃。

捕捉元素(snap and snap to element)

        捕捉的功能会促使scroller去重新定义位置,这样可以制作更加花哨的传送带效果。点击这里有个小例子。

        默认情况下,iScroll将scroller分成四分体,或者是相同大小的wrapper。iScroll 4加入了这个属性允许捕捉scroller里的任何元素,不考虑外部wrapper的大小。如果你想要实现这样的传送带效果,我建议你使用“quadrant”分割。最佳的设置如下:

                 var myscroll=new iScroll("wrapper",{

                       snap:true,

                       momentum:false,

                       hScrollbar:false,

                       vScrollbar: false

                  });

          捕获元素,可以通过传递一个字符串来作为查询条件,如下:

                var myscroll=new iScroll("wrapper",{

                      snap:"li",

                      momentum:false,

                      hScrollbar:false,

                      vScrollbar:false

                });

           在这个例子中scroller可以捕捉到滚动区域中最左上角的li元素



自定义滚动条(custom scrollbars)

          在iScroll 4这个版本中,可以利用一系列的css来自定义滚动条的呈现。可以给滚动条添加一个class参数,如下:

                  var myscroll=new iScroll("wrapper",{

                     scrollbarClass: "myScrollbar"

                 });

          你可以点击这里看一个小例子,在这个小例子里,myScrollbarH这个类被添加到了水平滚动条上,myScrollbarV这个类则被添加给了垂直方向上的滚动条上了。需要提醒的是,滚动条是由两个元素组合而成的:容器和显示器。容器同wrapper的高度相同,而显示器则代表的是滚动条本身。

           滚动条的HTML结构如下:

                  <div class="myScrollbarV">

                          <div></div>

                  </div>

                 .myscrollbarV{

                           position:absolute;z-index:100;width:8px;bottom:7px;top:2px;right:1px;

                  }

                .myScrollbarV > div {
                           position:absolute;
                           z-index:100;
                           width:100%;
                             /* The following is probably what you want to customize */
                           background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
                           border:1px solid #800;
                          -webkit-background-clip:padding-box;
                          -webkit-box-sizing:border-box;
                          -webkit-border-radius:4px;
                          -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
                 }

通用方法:

     (1)refresh                          在DOM树发生变化时,应该调用此方法

     (2)scrollTo()                     滚动到某个位置

               eg: myscroll.scrollTo(0,10,200,true);

     (3)scrollToElement()      滚动到某个元素

               eg: myscroll.scrolToElement("li:nth-child(10)",100);

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

                eg: myscroll.destroy()
分享到:
评论

相关推荐

    iscroll5上拉下拉实例完整demo

    **iscroll5上拉下拉实例完整demo**是基于iscroll5库的一个示例项目,主要针对移动Web环境,展示了如何实现平滑的滚动效果,包括上拉加载更多和下拉刷新的功能。iscroll5是Jacob Gohmann开发的一个轻量级的JavaScript...

    iscroll.js下载 5.1.3最新版本

    **iscroll.js** 是一个高性能、轻量级的JavaScript滚动库,主要用于解决移动Web端的滚动问题,尤其在处理触摸事件和实现平滑滚动效果时表现出色。它为开发者提供了强大的API接口,使得在网页中实现复杂滚动效果变得...

    iscroll分页滚动(加回到顶部)

    **iscroll分页滚动技术详解** 在Web开发中,iscroll是一个流行的JavaScript库,用于处理触摸设备上的滚动事件,提供高性能、平滑的滚动效果。iscroll不仅支持基本的滚动功能,还可以实现下拉刷新、上拉加载更多等...

    iscroll5 不改动官方源码下拉刷新

    在IT行业中,iscroll5是一款广泛使用的轻量级滚动插件,特别适合处理移动设备上的滚动事件。这个项目“iscroll5 不改动官方源码下拉刷新”提供了一种方法,使得开发者能够在不修改iscroll5核心源码的前提下实现下拉...

    iscroll所用到的js文件

    **iscroll概述** iscroll是一款轻量级的JavaScript滚动库,由Matteo Spinelli开发,主要用于处理网页上的滚动事件,特别是在移动设备上。它能够提供流畅、高性能的滚动效果,支持滚动条、无限滚动、触摸事件、鼠标...

    iscroll5.2.0--页面下拉刷新,上拉分页加载

    **iscroll5.2.0** 是一个轻量级、高性能的JavaScript滚动库,由Matteo Spinelli开发,主要用于解决移动端浏览器的滚动问题。它提供了平滑的滚动体验,并支持许多高级特性,如下拉刷新(Pull-to-Refresh)和上拉加载...

    iscroll4

    **iscroll4** 是一个轻量级的JavaScript库,由Matteo Spinelli开发,用于在Web页面上实现平滑的滚动效果。iscroll主要用于处理触摸设备和鼠标滚轮事件,提供高性能的滚动功能,特别是在移动端,它可以替代浏览器原生...

    H5使用iscroll-4模拟手机app下拉刷新功能实现demo

    下面我们将深入探讨如何使用`iscroll-4`在`H5`页面中实现这一功能。 `iscroll-4`是由Matteo Spinelli开发的一个轻量级JavaScript库,专门用于处理触摸设备上的滚动事件。它提供了平滑的滚动效果,支持多种手势,...

    iscroll5 滑动 滚动

    **iscroll5 滑动滚动技术详解** iscroll 是一款轻量级的JavaScript库,由Matteo Spinelli开发,主要用于实现移动端和桌面端网页的高性能滚动效果。iscroll5是该库的一个版本,专注于解决移动设备上的滚动问题,提供...

    jquery iscroll下拉插件

    《jQuery iScroll下拉插件详解》 在Web开发中,滚动效果是用户界面不可或缺的一部分,尤其是在移动设备上。为了实现更加流畅、响应式的滚动体验,开发者常常会使用到jQuery iScroll这个强大的库。本文将深入探讨...

    iscroll插件

    **iscroll插件详解** iscroll是一款轻量级的JavaScript插件,专为解决移动设备上的滚动问题而设计。在移动设备上,由于触摸事件的处理和原生滚动的复杂性,开发人员经常面临实现流畅滚动的挑战。iScroll通过提供高...

    iscroll4.js

    iscroll4.js不仅提升了用户体验,还包含了上拉刷新和下拉加载更多的功能,这对于内容分页和实时更新的应用场景尤为重要。 在HTML5页面中,iscroll4.js的核心功能在于处理滚动事件。通过监听用户的滑动操作,iscroll...

    iScroll滑动插件的使用示例

    iScroll是一款广泛应用于Web开发中的JavaScript滚动插件,由Matteo Spinelli开发。它提供了高性能、平滑的滚动效果,适用于触摸设备和鼠标操作的网页。在移动设备上,由于浏览器内置的滚动机制可能存在性能问题,...

    iscroll v5.2.0最新demo下载

    **iscroll v5.2.0 最新demo下载** iscroll是一个轻量级的JavaScript库,主要用于解决在移动设备上实现高性能的滚动效果。在iscroll v5.2.0这个版本中,开发者可以享受到更加优化的滚动体验,特别是在处理移动端上拉...

    iscroll.js 用法demo

    **iscroll.js 用法详解** `iscroll.js` 是一个轻量级、高性能的JavaScript滚动库,由Matteo Spinelli开发。它主要用于解决移动Web应用中的滚动问题,提供了平滑的滚动效果,支持触摸事件,使得在手机或平板等触摸...

    html iscroll demo.rar

    3. **初始化iscroll**:在JavaScript中,使用`new IScroll`来创建一个iscroll实例。你需要传入两个参数,第一个是滚动容器的选择器,第二个是一个配置对象,可以设置滚动方向、是否启用鼠标滚轮等选项。 ```...

    滚动分页,iscroll

    在本篇文章中,我们将深入探讨如何使用iscroll插件来实现滚动分页。 iscroll是一款轻量级、高性能的JavaScript库,由Matteo Spinelli开发,主要用于处理触摸滚动和滚动事件。它支持各种设备和浏览器,包括桌面、...

    手机端加滚动条iscroll-lite

    `iscroll-lite`是一个轻量级的JavaScript库,专门用于解决手机端的滚动问题,提供流畅的滚动效果。本文将深入探讨`iscroll-lite`的相关知识点。 ### 1. `iscroll-lite`简介 `iscroll-lite`是`iScroll`库的一个简化...

    iScroll 4.2.5 中文API

    ### iScroll 4.2.5 中文API详解 #### 概述 iScroll是一款流行的JavaScript库,专门用于实现移动设备上的平滑滚动效果。它最初是为了弥补原生滚动功能在早期移动浏览器上的不足而创建的。随着版本的迭代,iScroll...

    iscroll 下拉 上拉 刷新

    **iscroll:流畅的前端滚动解决方案** iscroll是一款轻量级、高性能的JavaScript库,专为处理触摸设备上的滚动事件而设计。它提供了一个简单易用的API,使得开发者能够轻松实现平滑的滚动效果,包括下拉刷新(pull-...

Global site tag (gtag.js) - Google Analytics