ホームページ > 記事 > ウェブフロントエンド > モバイルプルダウンの更新、iScroll.jsの使い方（再版）_html/css_WEB-ITnose
モバイルプルダウンの更新、iScroll.jsの使い方（再版）_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:46:502154ブラウズ
知識を広め、学ぶための最良の方法は共有することです
[著者]: フロントエンドに蹴られる
[出典]: http://www.cnblogs.com/duanhuajian/
[声明] : すべて ブログ記事のタイトルの後に追加された「共有」という単語は、他の人からの優れた記事のコレクションを示し、残りはオリジナルです。
公式 Web サイト: http://cubiq.org/iscroll-4
概要
iScroll 4 このバージョンは、iScroll フレームワークの元のコードを完全に書き直します。このプロジェクトは、モバイル Webkit ブラウザー (iPhone、iPad、Android などのシステムで広く使用されている) が、高さと幅が制限された要素のコンテンツをスライドするローカライズされた方法を提供するという理由から作成されました。残念ながら、この場合、すべての Web アプリケーション ページに、position:absolute を含むヘッダーとフッター、またはスクロール可能なコンテンツを含む中間領域を含めることはできません。
ただし、Android システムの最新リビジョンではすでにこの機能をサポートできており (ただし、サポートは特に優れているわけではありません)、Apple は 1 本指のスライド イベントを div 要素に適用することに消極的のようです。
以前のバージョンの iScroll の機能に加え、iScroll 4 には次の機能も含まれています:
(1) ズーム (ピンチ/ズーム)
(2) プルアップ/ダウンして更新
(3) 速度とパフォーマンスの向上
(4) 要素を正確にキャプチャ
(5) スクロール バーをカスタマイズ
フレンドリーな注意事項: iScroll 4 は iScroll 3 の単純な代替バージョンではなく、API ドキュメントはもはや同じではありません。同時に、このバージョンはテスト期間中であることを考慮して、一部の API にマイナーな変更が加えられる可能性があります。
この文書では、iScroll スクリプト ライブラリをすぐに使い始める方法を説明する多くの例が示されています。記事内の小さなデモの例を参照し、このドキュメントを注意深く読んでください。少し退屈かもしれませんが、この記事には iScroll スクリプト ライブラリの本質が含まれています。 iScroll ではスクロールする要素の初期化が必要ですが、ページ上で iScroll を使用する要素の数は制限されません (ハードウェア構成はここでは考慮されません)。スクロール要素内のコンテンツのタイプと長さは、iScroll スクリプト ライブラリで同時に使用できる要素の数にある程度影響します。
iScroll を使用するための最適な構造は次のとおりです:
<div id="wrapper"> <ul> <li></li> ..... </ul></div>
この小さな例では、ul タグがスクロールされます。 iScroll が効果を発揮するには、スクロール コンテンツの外側でラッパーと接触する必要があります。 [注意]:
ラッパー内の最初の子要素のみをスクロール可能にしたい場合は、次の記述を試してください:
<div id="wrapper"> <div id="scroller"> <ul> <li></li> ... </ul> <ul> <li></li> ... </ul> </div></div>
この例では、2つのul要素が含まれている場合でも、scroller要素はスクロールできます
iScrollは呼び出す前にインスタンス化する必要があり、次の状況でiScrollをインスタンス化できます:
(1) onDOMContentLoadedイベントを使用してスクロールを実装します
スクロールされる
変数 myscroll はグローバルなのでどこからでも呼び出せます
(2) onLoad イベントを使ってスクロールを実装します
DOM 構造体の後に DOMContentLoaded イベントが呼び出されるため。がロードされると、画像などの要素がロードされる前にスクロール領域が決定されない場合があります。長さと幅は onLoad イベントを使用して取得できます。これは、ページのリソース (画像を含む) が 100 ミリ秒読み込まれた後に初期化されます。 ISCROLL を呼び出します。 ） 3
(3) インライン初期化このメソッドは推奨されませんが、多くの JavaScript ブルがこのメソッドを使用しています。 ?
不过建议你使用一些框架的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' 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}); 如果你想对缩放功能进行深度的自定义的话可以使用下面的一些选项：
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 }); 可以通过设置snap参数为指定标签来设定捕捉对象。比如捕捉li标签。
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"}); 需要提醒的是，滚动条是由两个元素组合而成的：容器和显示器。容器同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树发生变化时，应该调用此方法
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;
iScroll的发展方向