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

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 サイトの他の関連記事にも注目してください。

関連書籍:

nodejでxml2jsを使用する方法

node.jsのpathモ​​ジュールの詳細な説明

以上がモバイル プラグイン IScroll.js の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。