0

スクロールできるようにする必要がある div があります。残念ながら、デフォルトのブラウザは非常に醜いので、私はJScrollpaneを使用して回避しようとしています。

ただし、私には協力していないようです。もちろん、JQueryとともに必要なリンクを追加しました

<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />

これは私のファイル構造に対応しており、次を使用してスクリプトを呼び出しました

<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider(); 
        $('.work-description').jScrollPane();
    });
  </script>

私のdivも整っているようです：

<div class="workdescription" id="Plumbing">
                    <div id="shop">
                    <div class="item" data-id="1" data-name="This here is a very large piece of information" data-price="47.50">
                        <p><button class="add-to-cart" type="button">Add</button></p>
                        <p class="itemPrice">This is about the longest sentence you'll get</p>
                    </div>


            </div>

CSS 値が overflow:auto; の場合

また、overflow:hidden; も試しました。しかし、それもうまくいきませんでした。私はまだ醜いスクロールバーに悩まされています。JScript エラーは発生していません。これどうしたの？

4

2 に答える 2

1

以前に jScrollPane を使用したことがありますが、基本的にはコンテナー、ラッパーとして使用される段落、およびスクロールバーを持つコンテナーが ajax 応答からのものである場合は再初期化する必要がある jScrollPane の呼び出しが必要です。

あなたのコードに基づいて、あなたのhtmlは次のようになると思います：

<div class="workdescription" id="Plumbing">
<p>
                    <div id="shop">
                    <div class="item" data-id="1" data-name="This here is a very large piece of information" data-price="47.50">
                        <p><button class="add-to-cart" type="button">Add</button></p>
                        <p class="itemPrice">This is about the longest sentence you'll get</p>
                    </div>
                    </div>
</p>
</div>

次に、セレクターで、html の後にスクリプトを含めるだけで、window.load() でスクリプトをラップする必要がなくなります。

<script>
$('.workdescription').jScrollPane({autoReinitialise: true});
</script>
于 2012-07-09T22:53:17.497 に答える
0

クラス名は HTML では「workdescription」ですが、セレクターとして「.work-description」を使用しました。それが問題のようです;）

于 2012-07-09T22:50:07.570 に答える