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

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

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

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。