iScroll に基づいてコンテンツのスクロール効果を実装する

この記事では、主に iScroll に基づいたコンテンツのスクロール効果を詳しく紹介します。興味のある方は参考にしてください。ネイティブ IOS アプリケーションでのスクロール リスト操作をシミュレートでき、ズーム、プルツーリフレッシュ、正確な要素キャプチャ、カスタマイズされたスクロール バーなどの機能も実装できます。ここでブロガーが使用しているバージョンは iScroll4.25 です。公式 Web サイトからダウンロードできます。

公式ウェブサイトのアドレス: http://iscrolljs.com/

2. iScroll の使用方法

1. iScroll の使用構造

iScroll を使用するための最適な構造は、一般に次のとおりです:HTML :

<p id="wrapper">
  <p id="scroller">
   <ul>
    <li></li>
    ...
   </ul>
   <ul>
    <li></li>
    ...
   </ul>
  </p>
 </p>

注: 1. iScroll が効果を発揮するには、スクロール コンテンツの外側のラッパーにアクセスする必要があります。

2. ラッパー内の最初の子要素のみがスクロールできます。

2. iScroll をインスタンス化する

iScroll を呼び出す前にインスタンス化する必要があります (head タグに次のコードを追加します): rreee

3 つ。

HTML+CSS:

<script src="iscroll.js"></script>
 <script>
  var myscroll;//myscroll是全局变量，可以任意地方调用
  function loaded(){
   myscroll = new iScroll("wrapper");
   }
  window.addEventListener("DOMContentLoaded",loaded,false);
 </script>

4. ランニング効果

ブロガーは学び始めたばかりです。部分的なコンテンツのスクロールは iScroll の最も基本的な機能にすぎません。ブロガーは次にプルして更新やその他の機能を試してみます。 上記は私があなたのためにまとめたものです。

関連記事:

Ajaxフォーム送信とバックグラウンド処理をベースにした簡単なアプリケーション

画像アップロードとプレビューのAjax簡単実装

Ajax HTMLをベースにしたファイルアップロードスキルのまとめ

以上がiScroll に基づいてコンテンツのスクロール効果を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。