1

ドキュメントを読み、デモを理解しようとしましたが、カスタム スクロールバーはまだありません。

基本的に、iScroll-Custom-Scrollbar からデモ コードをコピーしました。

HTML

<div class="demo-page" data-role="page" id="test-page">

  <div data-role="header">
<h1>Header</h1>
  </div><!-- /header -->

  <div data-iscroll="" data-role="content" id="wrapper">

    <div class="iscroll-pulldown"></div><!--iScroll-Pulldown-->

    <ul data-role="listview" id="thelist">
        <li>Item 1 culpa aut nam qui</li>
        <li>Item 2 minima quam temporibus quidem</li>
        <li>Item 3 commodi sint facilis numquam</li>
    </ul>
 </div><!--wrapper-->
 </div><!--page-->

脚本

<script type="text/javascript">
var myScroll;
myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });
</script>

実際には、クラス属性をスクロールバーの div に追加する必要がありますが、そうではありません。

バーをぎりぎりまで絞ろうとした後;)画面の高さが非常に小さくなるとすぐにクラスが追加され、再び大きくなると消えることがわかりました。見るのはかなり面白いです...私を夢中にさせます:D

4

1 に答える 1

1

iscrollviewを正しく初期化していないようです。

代わりにこれを試してください

<div class="demo-page" data-role="page" id="test-page">

  <div data-role="header">
<h1>Header</h1>
  </div><!-- /header -->

  <div data-role="content" data-iscroll='{"scrollbarClass": "myScrollbar"}'>

    <div class="iscroll-pulldown"></div><!--iScroll-Pulldown-->

    <ul data-role="listview" id="thelist">
        <li>Item 1 culpa aut nam qui</li>
        <li>Item 2 minima quam temporibus quidem</li>
        <li>Item 3 commodi sint facilis numquam</li>
    </ul>
 </div><!--wrapper-->
 </div><!--page-->

スクリプトタグのコードを捨ててください。不要です。

iscrollviewを使用することの全体的なポイントは、javascriptで何もする必要がないことです。data-iscroll属性をdivに含めるだけで、単純なiscrollerをセットアップできます。カスタマイズされたiscroll機能をさらに追加する場合は、data-iscroll=の後に引用符で囲んでください。

iscrollviewプラグインが自動的にラッパー要素を作成するため、ラッパー要素を指定する必要もありません。

于 2013-03-20T00:17:28.460 に答える