-1

jscrollpaneに関して問題があります。おおよそこのマークアップを持つフィルムストリップ スタイルのサムネイル ナビゲーションを作成したいと思います。

<div class="thumbnails">
<ul class="scroll-pane horizontal-only">
<li><img></li>
<li><img></li>
</ul>
<div>

CSS は次のとおりです。

.thumbnails {
    background-color:#666;
    height:70px;
    position:fixed;
        bottom:0;
        left:0;
    width:100%;
}

.thumbnails .scroll-pane {
    height:70px;
    width:100%;
    overflow:auto;
}

.thumbnails .horizontal-only { 
    height:auto;
    max-height:70px;
}

.thumbnails li {
    display:block; 
    float:left;
    height:70px;
    width:49px;
}

ul-tag で jscrollpane を呼び出しました。目的の出力は、水平スクロールのみでブラウザー ウィンドウの下部に固定されたサムネイル ナビゲーションです。私が得た結果は、垂直スクロールバーを備えた固定位置のサムネイル ナビゲーションです。これは、Li 要素がブラウザー ウィンドウの最後で壊れ、新しい行で始まるように見えるためです。それに加えて、スクロールできない水平スクロールバーが表示されます。

css または jscrollpane で何かを変更する必要があるかどうかはわかりません。これについてのコメントはうれしいです。前もって感謝します！

4

1 に答える 1

0

jScrollPane の動作に必要な CSS を含めましたか? それらはhttp://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.cssにあります。

そして、水平および垂直スクロールを行う方法の例を次に示します: http://jscrollpane.kelvinluck.com/basic.html

更新: .thumbnails の CSS ルール 'bottom: 0' を 'top:0' に置き換えると、水平バーが表示されます。

更新 2 : この質問を見てください:垂直ではなく水平方向に DIV のアイテムをスクロールしますか? 垂直スクロールを行う方法を示します（ただし、jScrollPane は使用しません）。

于 2013-06-27T11:17:50.497 に答える