まとめ
IsCroll 4のこのバージョンは、IsCrollフレームワークの元のコードを完全に書き直します。このプロジェクトは、モバイルWebKitブラウザー(iPhone、iPad、Androidなど)の広範な使用のために完全に作成されました
高さと幅を定義する要素のコンテンツをスライドさせるローカライズされた方法が提供されます。残念ながら、この場合、すべてのWebアプリケーションのページには、ヘッダー、ページの終了、または位置を持つスクロール可能なコンテンツを含めることはできません:Absolute。
中央の領域。
ただし、Androidシステムの最新の改訂はすでにこの機能をサポートできます(サポートは特に良くありませんが)。AppleはDiv要素に1本の指スライドイベントを適用することに消極的です。
IsCrollの以前のバージョンの機能に加えて、Iscroll 4には次の機能も含まれています。
(1)ズーム(ピンチ/ズーム)
(2)プルアップ/ダウンして更新します
(3)速度とパフォーマンスの改善
(4)要素を正確にキャプチャします
(5)カスタムスクロールバー
フレンドリーなヒント:IsCroll 4は、IsCroll 3の単純な代替手段ではなく、APIドキュメントはすでに異なります。また、このバージョンがベータ版にあることを考慮すると、一部のAPIには小さな変更がある場合があります。
ユーザーガイド
このドキュメントでは、Iscrollスクリプトライブラリをすばやく開始する方法を教えるための多くの例を見つけることができます。記事のデモの例を参照してこのドキュメントを注意深く読むのは少し退屈かもしれませんが、この記事はスクリプトライブラリIsCrollの本質です。
IsCrollは、スクロールする要素を初期化する必要があり、ページ内のiScrollを使用して要素の数を制限しません(ハードウェア構成はここでは考慮されません)。スクロール要素のコンテンツのタイプと長さは、IsCrollスクリプトライブラリにある程度影響します
同時に使用できる要素の数。
IsCrollスクリプトライブラリを使用する場合、DOMツリーの構造は、不要なタグを削除し、タグの過度のネストを避けるのに十分なシンプルでなければなりません。
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要素が含まれていても、スクラー要素をスクロールすることができます
IsCrollは呼び出す前にインスタンス化する必要があります。次の場合にIsCrollをインスタンス化できます。
(1)onDomomContentLoadedイベントを使用して、スクロールを達成します
コンテンツのスクロールに適したコンテンツにはテキストと写真のみが含まれており、すべての写真には固定サイズがあります
<スクリプトsrc = "iscroll.js"> </script> <script> var myscroll; function loaded(){myscroll = new iscroll( "wrapper"); } window.addeventlistener( "domcontentloaded"、loaded、false); </script>注:myscroll変数はグローバルなので、どこにでも呼び出すことができます
(2)オンロードイベントを使用して、スクロールを達成します
DOM構造をロードした後にdomContentLoadedイベントが呼び出されるため、画像などの要素がロードされない前に、スクロール領域の長さと幅が決定されない場合があります。現時点では、オンロードイベントを実装できます。
<スクリプトsrc = "iscroll.js"> <script> <script> var myscroll; function loaded(){settimeout(function(){myscroll = new iscroll( "wrapper");}、100); } window.addeventlistener( "load"、loaded、false); </script>この場合、ページリソース(写真を含む)が100msロードされた後、IsCrollは初期化されます。これは、IsCrollを呼び出すための比較的安全な方法である必要があります。
(3)インラインの初期化
この状況は、ページがJSにロードされたときに呼び出されます。この方法は推奨されませんが、多くのJavaScript Bigwigsがこの方法を使用しています。どんな理由が反対しなければなりませんか?
<script src = "iscroll.js"> </script> <div id = "wrapper"> <ul> <li> </li> ... </ul> </div> <スクリプト> var myscroll = new iscroll( "wrapper"); </script>
ただし、いくつかのフレームワーク対応方法を使用して、IsCroll(jqueryのReady()など)を安全に呼び出すことをお勧めします。
IsCrollで渡されたパラメーター
IsCrollの2番目のパラメーターを使用すると、次のコードなどのコンテンツをカスタマイズできます。
<script> var myscroll = new iscroll( "wrapper"、{hscrollbar:false、vscrollbar:false}); </script>2番目のパラメーターは通常、オブジェクトです。たとえば、スクロールバーは上記の例には表示されません。一般的に使用されるパラメーターは次のとおりです。
hscroll falseは水平方向のスクロールを禁止します真の水平スクロールデフォルトはtrueに
vscroll false洗練された垂直スクロール真の垂直スクロールデフォルトはtrue
hscrollbar falseは、水平方向にスクロールバーを隠します
vscrollbar false Hide Scrollbar bar垂直方向
iOSシステム上の固定scrollbarは、要素ドラッグがscrollerの境界を超えると、巻物が収縮します。 ScrollbarがScrollerを超えるのを防ぐためにTrueに設定します。
シュローラーの目に見える領域。デフォルトはAndroidではtrue、iOSではFalseです
フェードクロールバーのfalseは、フェード効果がないときに巻物棒を非表示にするように指定します
hidescrollbarは、ユーザーの相互作用がないときにscrollbarを隠し、デフォルトはtrueになります
バウンスバウンスのバウンスを有効または無効にすると、デフォルトでtrue
Momentumは慣性を有効または無効にします。デフォルトはTrueです。このパラメーターは、リソースを保存する場合に非常に便利です。
lockdirection falseキャンセルドラッグ方向のロック、真のドラッグは一方向にのみ(上/下または左/右)になることができます
さまざまな効果の達成
「プルを更新する」デモをスクロールします
Twitterと一部のAppleローカルアプリが登場して以来、この効果は非常に人気があります。ここを見ることができます。
最新バージョンでは、著者は「Pull to Refresh」部分をIsCrollの追加のプラグインとして分離します。ここをクリックして、Pull to Refrendの仕組みを確認できます。必要なのは、pulldownaction()メソッドをカスタマイズすることだけです。新しいコンテンツをロードするにはAJAXが必要になる場合がありますが、DOMツリーが変更されたら更新を呼び出すことを忘れないでください。この例では、ネットワークの遅延効果をシミュレートするために1秒の遅延を追加したことを覚えておく必要があります。もちろん、この遅延を使用したくない場合は、SettimeOutメソッドを削除してください。
ズーム(ピンチ /ズーム)「プルするためにプル」デモ
私たちは、ただローリングすることは実際には新しいものではないという事実に直面しなければなりません。これが、このバージョンのiscroll4でそれを置くことを許可する理由です
大きくて縮みます。この関数を必要とするには、ズームパラメーターをTrueに設定するだけで、ジェスチャーを使用してズームインおよびアウトする必要があります。ここを見ることができます。
ダブルクリックへのズームインとアウトもIsCroll 4でサポートされています。ズーム機能を使用するには、少なくとも次の構成が必要です。
var myscroll = new iscroll( "wrapper"、{zoom:true});
ズーム機能を詳細にカスタマイズする場合は、次のオプションの一部を使用できます。
Zoommaxは、拡大を可能にする最大倍数を指定します、デフォルトは4です
[注]:画像スケーリングを効果的にしたい場合は、ハードウェア合成レイヤーに入れてください。素人の用語では、スケーリングする必要があるすべてのIMG要素で-webkit -transform:translate3d(0,0,0)を使用することです。そして、ハードウェアの加速が多くのリソースを占有し、注意して使用する必要があることが特に重要です。そうしないと、アプリケーションがクラッシュする可能性があります。
要素「Carousel」デモにスナップしてスナップします
SNAP関数は、要素が指定された位置にスライドするかどうかを判断することです。この効果により、派手なマーキー効果を作成できます。
プラグインは、キャプチャオブジェクトと同じラベルまたはスクロール領域の同じサイズの要素を自動的に分析し、パラメーターを使用してキャプチャされたオブジェクトを指定することもできます。
var myscroll = new iscroll( "wrapper"、{snap:true、momentum:false、hscrollbar:false、vscrollbar:false});SNAPパラメーターを指定されたタグに設定して、SNAPオブジェクトを設定できます。たとえば、LIタグをキャプチャします。
var myscroll = new iscroll( "wrapper"、{snap: "li"、momentum:false、hscrollbar:false、vscrollbar:false});この例では、スクロラーはスクロール領域の左上左のLI要素をキャプチャできます
カスタムスクロールバー
IsCroll 4では、一連のCSSを使用して、スクロールバーのレンダリングをカスタマイズできます。次のように、スクロールバーにクラスパラメーターを追加できます。
var myscroll = new iscroll( "wrapper"、{scrollbarclass: "myscrollbar"});スクロールバーは、コンテナとディスプレイの2つの要素で構成されていることに注意してください。コンテナはラッパーと同じ高さですが、ディスプレイはスクロールバー自体を表します。
スクロールバーのHTML構造は次のとおりです。
<div> <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%; / *以下はおそらくカスタマイズしたいものです */背景:-WebKit-グレジエント(線形、0、100%0、(#f00)、(#900)); border:1px solid#800; -webkit-background-clip:パディングボックス; 1PX 1PX 0 RGBA(255,255,255,0.5); }一般的な方法:
(1)DOMツリーが変更されたら、この方法を更新する必要があります
例:setimeout(function(){myscroll.refresh();}、0);
(2)IsCrollは、Scrollto、Scrolltotelement、Scrolltopageの3つの方法も提供しているため、JavaScriptを介してスクロール効果を制御できます。
scrollto(x、y、time、relative):指定された時間内にコンテンツスクロールバーx/y位置とします。たとえば、myscroll.scrollto(0、-100、200)は、200ミリ秒で100ピクセルの下方にスクロールします。 myscroll.scrollto(0、10、200、true)は、現在の位置と比較して200ミリ秒以内にy軸に10ピクセルをスクロールする効果を達成できます。
ScrollToElement(要素、時間):指定された時間内に指定された要素にスクロールします。たとえば、myscroll.scrolltoelement( 'li:nth-child(10)'、100)は、100ミリ秒以内に10番目のLi要素の位置にスクロールします。最初のパラメーターを使用して、CSS3のセレクターで要素をフィルタリングできます。
Snaptopage(pagex、pagey、time):200ミリ秒で1ページから2ページまでスクロールします(0は1ページを表し、1は2ページを表します)。この関数は、SNAP関数を使用するときに呼び出すことができます。
(3)detroy()はmyscrollとそのメモリスペースを完全に排除します
例:myscroll.destroy();
myscroll = null;
IsCrollの開発方向
フォームドメインサポート
スケーリング最適化
より良いデスクトップブラウザー互換性
Onscrolイベントの最適化
ハッシュ値の追加の変更
DOMが変更された後の自動更新