ホームページ > 記事 > ウェブフロントエンド > モバイルプラグイン IScroll.js の使用方法

モバイルプラグイン IScroll.js の使用方法

php中世界最好的语言オリジナル: 2018-03-07 10:50:185796ブラウズ

IScroll.js プラグインはすべてのモバイルスクロールバーイベントと互換性があることがわかっています。一部の Android マシンでは、overflo:scroll; を介してスクロールバーを操作できませんが、IScroll.js は安全なコンテナ要素で実際に処理できます。スクロールして、IScroll.js について詳しく説明しましょう。

注

IScroll.js を使用する場合は、次のような 3 レベルの要素のネストが必要です。

<div class="food-left">
    <ul class="food-nav">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul></div>

最も外側の food-left には、position:relative と overflow: hidden の 2 つの CSS スタイルが必要です。

初期化

IScroll.js は IScroll コンストラクター;
次のように、初期化しました

<script type="text/javascript">
      leftScroll = new IScroll(".food-left");</script>

コンストラクターで渡される実際のパラメーターは、ES6 の新しい querySelector パラメーターと一致しています。 jQuery セレクターと同じです。
注: DOM 構造がロードされた後に初期化する必要があります。そうしないと無効になります。

Settings

IScroll.js では、スクロールイベントのプロパティを構成するために 2 番目のパラメーターを渡すことができます。

leftScroll = new IScroll(".food-left", {
       scrollbars: true,
       bounce: false,
       mouseWheel:true,
       click:true});

スクロールバー

scrollbars: true

スクロールバーを表示するかどうか。デフォルトは false です。

fadeScrollbars:true

スクロールバーのフェードインおよびフェードアウト効果。もちろん、スクロールバーが表示されることが前提です。デフォルトは false です。

interactiveScrollbars

スクロールバーをドラッグするかどうか。デフォルトは false です。スクロールバーの長さは比例して設定されます。デフォルトは true です。スクロールがコンテナ境界に達しました。デフォルトは true、

resizeScrollbars

有効なマウススクロールを表示するかどうか。デフォルトは false です。デフォルトは false です。必要に応じて、デフォルトのマウスを使用します。デフォルトは false です。プロジェクトのプラットフォームを確認すると、未使用のエフェクトを無効にすることができます。デフォルトは false;

bounce: false

スクロールバーの初期オフセット位置を設定します。デフォルトは none です。もちろん、それらはすべて

mouseWheel:true

の下にあります。

ネイティブの DOM オブジェクトである必要がある受信要素の位置までスクロールします

invertWheelDirection

は任意の位置までスクロールできます。移動したい場合は、設定する必要があります。負の数;

これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い php 中国語 Web サイトの他の関連記事にも注目してください。

モバイル プラグイン IScroll.js の使用方法

関連記事

モバイルプラグイン IScroll.js の使用方法