Mobile pull-down refresh, iScroll.js usage (reprint)_html/css

Sharing is the best way to spread and learn knowledge

[Author]: Kicked Front End

[Source] : http://www.cnblogs.com/duanhuajian/

[Disclaimer]: All blog post titles followed by (share) indicate the collection of excellent articles from others, and the rest are original.

Official website: http://cubiq.org/iscroll-4

Summary

iScroll 4 This version completely rewrites iScroll The original code of this framework. This project came about entirely because mobile webkit browsers (widely used on systems such as iPhone, iPad, and Android)
provide a localized way to slide the content of an element with limited height and width. . Unfortunately, in this case, all web application pages cannot contain headers and footers with position:absolute or a
middle area with scrollable content.
However, the latest revision of the Android system can already support this feature (although the support is not particularly good), and Apple seems reluctant to apply one-finger sliding events to div elements.
In addition to the features of previous versions of iScroll, iScroll 4 also includes the following features:
(1) Zoom (Pinch/Zoom)
(2) Pull up/down to refresh (Pull up/down to refresh)
(3) Speed and performance improvements
(4) Accurately capture elements
(5) Custom scroll bars
Friendly reminder: iScroll 4 is not a simple replacement version of iScroll 3, and the API documentation is different. . At the same time, considering that this version is in the testing period, some APIs may have minor changes.

Usage Guide

In this document you will find many examples to teach you how to quickly get started with the iScroll script library. See the small demo example in the article and read this document carefully. It may be a bit boring, but this article contains the essence of the iScroll script library.
iScroll needs to initialize the elements to be scrolled, and does not limit the number of elements using iScroll on a page (your hardware configuration is not considered here). The type and length of the content in the scroll element will, to a certain extent, affect the number of elements that
can be used simultaneously in the iScroll script library.
When using the iScroll script library, the structure of the DOM tree should be simple enough, remove unnecessary tags, and try to avoid excessive nesting of tags.
The optimal structure for using iScroll is as follows:

<div id="wrapper">        <ul>               <li></li>               .....        </ul></div>

Copy after login

In this small example, the ul tag will be scrolled . iScroll must contact the wrapper outside the scrolling content to have an effect.
[Note]:
Only the first child element in the wrapper can be scrolled. If you want more elements to be scrollable, then you can try the following Writing:

<div id="wrapper">        <div id="scroller">               <ul>                    <li></li>                     ...                </ul>                <ul>                     <li></li>                     ...                </ul>       </div></div>

Copy after login

In this example, the scroller element can be scrolled, even if it contains two ul elements

iScroll must be instantiated before calling. You can instantiate iScroll in the following situations:

　 (1) Use The onDOMContentLoaded event implements scrolling

Suitable for scrolling content that only contains text and pictures, and all pictures have fixed sizes

 <script src="iscroll.js"></script>        <script>                var myscroll;                function loaded(){                           myscroll=new iScroll("wrapper");                 }               window.addEventListener("DOMContentLoaded",loaded,false);         </script>

Copy after login

Note: The myscroll variable is global, so you can call it anywhere

　 (2) Use the onLoad event to implement scrolling

Because the DOMContentLoaded event is called after the DOM structure is loaded, the length and width of the scrolling area may not be determined before elements such as images are loaded. In this case, the onLoad event can be used to achieve this.

<<>

<script src="iscroll.js"><script>        <script>                    var myscroll;                    function loaded(){                   setTimeout(function(){                            myscroll=new iScroll("wrapper");                     }，100 );                }                window.addEventListener("load",loaded,false);         </script>

Copy after login

In this case, iscroll will be initialized after the page resources (including pictures) are loaded, This should be a safer way to call iScroll.

(3) inline initialization

This situation will be called when the page is loaded into js. This method is not recommended, but many javascript experts Everyone is using this method, so why should I disapprove?

<script src="iscroll.js"></script>                    <div id="wrapper">                            <ul>                                <li></li>                                 ...                          </ul>                  </div>        <script>                   var myscroll=new iScroll("wrapper");        </script>

Copy after login

不过建议你使用一些框架的ready方法来安全调用iScroll（比如jquery里的ready()）。

iScroll里传递的参数

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

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

Copy after login

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

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

缩放(pinch / zoom)　　'Pull to refresh' demo

我们不得不面对一个事实，那就是光有滚动其实没什么新意的。这就是为什么在iScroll 4这个版本里我们允许你可以放
大和缩小。想要这个功能，只需要设置放大的参数zoom 为true即可实现利用手势来放大和缩小。你可以看看这儿。
双击放大和缩小的功能在iScroll 4里也是得到支持的。要使用缩放功能，你至少需要如下配置：

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

Copy after login

如果你想对缩放功能进行深度的自定义的话可以使用下面的一些选项：
zoomMax 指定允许放大的最大倍数，默认为4
【注意事项】：如果想要图片缩放的效果很好的话要把他们放到硬件的合成层中。通俗点说，就是在所有需要缩放的img元素上使用-webkit-transform:translate3d(0,0,0)来实现，而且尤为重要的是，硬件的加速会占用大量资源，要谨慎使用，否则你的应用可能就此崩溃。
捕捉元素（snap and snap to element）　　'Carousel' demo

　　SNAP功能是判断元素是否滑动到指定位置。通过这个效果可以制作花哨的跑马灯效果。

　　插件会自动分析滚动区域内相同标签或相同大小的元素做为捕捉对象，也可以通过参数指定捕捉的对象

 var myscroll=new iScroll("wrapper",{                       snap:true,                       momentum:false,                       hScrollbar:false,                       vScrollbar: false                  });

Copy after login

可以通过设置snap参数为指定标签来设定捕捉对象。比如捕捉li标签。

 var myscroll=new iScroll("wrapper",{                      snap:"li",                      momentum:false,                      hScrollbar:false,                      vScrollbar:false                });

Copy after login

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

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

var myscroll=new iScroll("wrapper",{　　scrollbarClass: "myScrollbar"});

Copy after login

需要提醒的是，滚动条是由两个元素组合而成的：容器和显示器。容器同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);                 }

Copy after login

通用方法：

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

　　　　　　eg: setTimeout(function () { myScroll.refresh(); }, 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像素的效果。

　　　　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及其占用的内存空间
eg: myscroll.destroy();

　　　　　　　　myScroll = null;