公式ウェブサイト:http://iscrolljs.com/
IsCrollの最も単純なDOM構造:
<div id = "wrapper"> <ul> <li> ... </li> <li> ... </li> ... </ul> </div>
IsCrollを初期化します
var myscroll = new iscroll( '#wrapper'、options);
設定を初期化します
設定の初期化の使用例:
var myscroll = new iscroll( '#wrapper'、{mousewheel:true、scrollbars:true});設定リスト:
に属します | 属性名 | 説明します | デフォルト値 |
|---|---|---|---|
コアライブラリ クロー | options.usetransform | CSS3の変換プロパティを使用するかどうか | 真実 |
options.usetransition | CSS3の遷移プロパティを使用するかどうか、それ以外の場合は代わりにRequestAnimationFramを使用します | 真実 | |
options.hwcompositing | ハードウェアアクセラレーションを有効にするかどうか | 真実 | |
options.bounce | 弾性アニメーション効果を有効にするかどうか、オフにしてスピードアップ | 真実 | |
基本機能 基本機能 | options.click | クリックイベントを有効にするかどうか。このオプションをオフにし、カスタムタップイベント(options.tap)を有効にすることをお勧めします | 間違い |
options.disablemouse | マウスイベントの検出をオフにするかどうか。どのプラットフォームを実行するかがわかっている場合は、加速できるようにすることができます。 | 間違い | |
options.disablePointer | ポインターイベント検出をオフにするかどうか。どのプラットフォームを実行するかがわかっている場合は、加速できるようにすることができます。 | 間違い | |
options.disableTouch | タッチイベントの検出をオフにするかどうか。どのプラットフォームを実行するかがわかっている場合は、加速できるようにすることができます。 | 間違い | |
options.eventpassthrough | IsCrollの水平軸を使用して転がす場合、システム垂直軸を使用して水平軸を順調に進めて有効にする場合は、オンにしてください。 イベントパススルーデモ | 間違い | |
options.freeScroll | 主に、上、下、左、および右のスクロールが有効になり、任意の方向にスクロールできる場合に使用されます。 2Dスクロールデモ | 間違い | |
options.keybindings | キーイベントをバインドします。 キーバインディング | 間違い | |
options.inverthwheeldirection | 逆マウスホイール。 | 間違い | |
options.momentum | スタートアップアニメーションをオンにするかどうかにかかわらず、効率を向上させるためにオフにします。 | 真実 | |
options.mousewheel | マウスホイールイベントを聴くかどうか。 | 間違い | |
options.preventdefault | デフォルトのイベントをブロックするかどうか。 | 真実 | |
options.scrollbars | デフォルトのスクロールバーを表示するかどうか | 間違い | |
options.scrollx options.scrolly | 水平または垂直のスクロールバーを表示するかどうかを設定できます | scrollx false Scrolly True | |
options.tap | カスタムタップイベントを有効にするかどうか タップイベント名をカスタマイズできます | 間違い | |
スクロールバー スクロールバー | options.scrollbars | デフォルトのスクロールバーを表示するかどうか | 間違い |
options.fadescrollbars | Scrollbarをフェードするかどうか、それをオフにしてスピードアップ | 真実 | |
options.interactivescrollbars | ユーザーはScrollbarをドラッグできますか | 間違い | |
options.resizescrollbars | スクロールバーのサイズを修正するかどうかにかかわらず、スクロールバーをカスタマイズするときに有効にすることをお勧めします。 | 間違い | |
options.shrinkscrollbars | スクロールがスクロール境界を超えるときにスクロールバーを縮小するかどうか。 「クリップ」:向こうにスクロールバーをトリミングします 「スケール」:スケーリングスクロールバーを比例して(CPUリソースを占有します) false:収縮なし、 | 間違い | |
options.indicators | スクロールバーの基礎となる実装であるIsCrollのスクロール方法を指示します。 | ||
options.indicators.el | スクロールバーのコンテナを作成します。コンテナの最初の要素はインジケータです。 例えば: 指標:{ EL:document.getElementByID( 'インジケータ') } 指標:{ EL: '#indicator' } | ||
options.indicators.ignoreboundaries | コンテナの境界を無視するかどうか。スクロール速度を設定するためにtrueに設定します Parallelaxデモ | 間違い | |
options.indicators.listenx options.indicators.listeny | インジケータは、その方向のスクロールを監視します。これは、1つの方向または2方向に設定できます。 | 真実 | |
options.indicators.speedratiox options.indicators.speedratioy | メインスクロールバーに対するインジケータの速度 | 0 | |
options.indicators.fade options.indicators.interactive options.indicators.resize options.indicators.shrink | Scrollbarsのような設定 ミニマップデモ | ||
options.probetype | IsCroll-Probe.jsは有効にする必要があります PROPETYPE:スクロールがビジーではないときにトリガーされます PROPETYPE:スクロール時に特定の時間ごとにトリガーされました PROPETYPE:ピクセルスクロールごとに1回トリガーされました | ||
スプリットページスナップ | options.snap | 回転ランタンなどの効果をもたらすために、コンテナを自動的に分割します。 options.snap:true //コンテナサイズに応じて自動的に分割されます options.snap:EL //要素に従ってセグメント | 間違い |
ズーム ズーム | options.zoom | ズームをオンにするかどうか iscroll-zoom.jsを使用するのが最善です 倍率がぼやけている場合、ソースコンテナはサイズの2倍として定義し、次にスケーリングすることができます(0.5) ズームデモ | 間違い |
options.zoommax | 最大ズームレベル | 4 | |
options.zoommin | 最小ズームレベル | 1 | |
options.startzoom | 初期スケーリングレベル | 1 | |
options.wheelaction | ローラーアクション 「ズーム」に設定すると、スクロールホイールでズームできます | 未定義 | |
その他の設定 | options.bindtowrapper | カーソルまたはタッチがコンテナを超えたときにスクロールを停止するかどうか | 間違い |
options.bounceEasing | 弾性アニメーション効果 プリセット効果:「二次」、「円形」、「バック」、「バウンス」、「弾性」(最後の2つはCSS3で表現できません) エフェクトをカスタマイズすることもできます 跳ね返る:{ スタイル: 'Cubic-Bezier(0,0,1,1)'、// css3 fn:function(k){return k; } // requestAnimationFrameを使用する場合、 } | 「円形」 | |
options.bouncetime | 弾性アニメーションのミリ秒数は続きます | 600 | |
Options.Deceleration | 転がり運動量減速 大きいほど速いほど、推奨される価格は0.01以下です | 0.0006 | |
options.mousewheelspeed | マウスホイール速度 | ||
options.preventdefaultexception | どの要素がデフォルトイベントをブロックしないかをリストします。 | {tagname: /^(input | textarea | button | select)$ /} | |
options.resizepolling | ウィンドウを変更するときに、isCroll時間間隔を再計算します | 60 | |
キーバインディング | options.keybindings | IsCrollを制御するために重要なイベントを聞いてください 例えば: keybindings:{ ページアップ:33、 ページダウン:34、 終了:35、 ホーム:36、 左:37、 UP:38、 右:39、 ダウン:40 } | |
ISCROLL5 API:
に属します | メソッド名 | 説明します |
|---|---|---|
スクロール | scrollto(x、y、時間、緩和) | スクロール:x、y、イベント、緩和方法 X:int Y:int 時間:int 緩和:二次|円形|戻る|バウンス|弾性 iscroll.utils.easeオブジェクトを参照してください 例: myscroll.scrollto(0、-100、1000、iscroll.utils.ease.Elastic); |
Scrollby(x、y、時間、緩和) | 現在の位置に比べてどこかにスクロールします 残りは上記と同じです | |
scrolltoelement(el、time、offsetx、offsety、緩和) | 要素にスクロールします。 ELは必要なパラメーターです offsetx/offsety:EL要素に対する変位。画面の中心になるように設定する 要素までスクロールします | |
スプリットページスナップ | Gotopage(x、y、時間、緩和) | options.snapに従ってページを分割し、風景やポートレートのページにジャンプします。 XYは同時に有効になります。 option.snapと組み合わせて使用します |
次() prev() | 前のページ、次のページ option.snapと組み合わせて使用します | |
ズーム | ズーム(スケール、x、y、時間) | スケーリングコンテナ スケール:スケーリングファクター |
リフレッシュします | REFRESH() | IsCrollを更新します |
破壊する | 破壊する() | IsCrollを破壊し、リソースを節約します |
IsCrollイベント:
beforescrollstart | ユーザーは画面をクリックしますが、スクロールする前にまだ初期化されていません |
|---|---|
スクロールキャンセル | スクロールを初期化した後にキャンセルします |
スクロールスタート | スクロールを開始します |
スクロール | スクロール |
スクロールします | スクロールエンド |
フリック | 左右の画面をタップします |
Zoomstart | スケーリングを開始します |
Zoomend | ズームの終わり |
イベントの使用例:
myscroll = new iscroll( '#wrapper'); myscroll.on( 'scrollend'、dosomhints);
IsCrollのプロパティ:
myscroll.x/y | 現在の場所 |
|---|---|
myscroll.directionx/y | 前回のスクロール方向(-1ダウン/右、0はオリジナルのまま、1アップ/左) |
myscroll.currentpage | 現在のスナップ情報 |
myscroll.maxscrollxmyscroll.maxscrolly | 下部にスクロールするときのmyscroll.x/y |