0

これには簡単な解決策があることはわかっていますが、方法が見つかりません。

この JQuery プラグイン (TinyScrollbar) を使用して、水平方向の「スクロール ボックス」を構築しています: http://baijs.nl/tinyscrollbar/

すべてのページに2つの「スクロールボックス」がありますが、内部には異なる「子」ボックスがあります（1行）。

これは最初の「ウィジェット」の HTML コードです。

<div id="scrollbar1">
    <div class="scrollbar">
        <div class="track"><div class="thumb"><div class="end"></div></div></div>
    </div>
    <div class="viewport">
        <div class="overview">
        <div class="item">Content</div>
        <div class="item">Content</div>
        <div class="item">Content</div>
    </div>
</div>

これは、2 番目の「ウィジェット」の HTML コードです。

<div id="scrollbar1">
    <div class="scrollbar">
        <div class="track"><div class="thumb"><div class="end"></div></div></div>
    </div>
    <div class="viewport">
        <div class="overview">
            <div class="item">Content</div>
                <div class="item">Content</div>
                <div class="item">Content</div>
                <div class="item">Content</div>
                <div class="item">Content</div>
                <div class="item">Content</div>
            </div>
        </div>
    </div>
</div>

すべての「アイテム」は固定の高さと幅 (つまり 100px) を持ち、左にフロートします (1 行表示)。すべてのアイテムは、クラス "overview" を持つ div によって含まれています。「概要」のCSS

#scrollbar1 .overview {
    left: 0;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 300px;
}

私の問題は次のとおりです。「アイテム」が > 3 または < 3 の場合に div の幅を動的に変更して、すべてのアイテムを一列に表示する方法は? プラグインの更新機能が使えることはわかっているのですが、実装方法がわかりません。

私はこのJavaScriptを使用しています

$(document).ready(function($) {
    $('#scrollbar1').tinyscrollbar({ axis: 'x'});
});
4

2 に答える 2

0

HTMLコードが少し間違っています。次のように変更してください。

<div id="scrollbar1">
    <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
    <div class="viewport">
        <div class="overview">
                    <div class="item">Content</div>
                    <div class="item">Content</div>
                    <div class="item">Content</div>
        </div>
    </div>
</div>

と

<div id="scrollbar1">
    <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
    <div class="viewport">
        <div class="overview">
            <div class="item">Content</div>
            <div class="item">Content</div>
            <div class="item">Content</div>
            <div class="item">Content</div>
            <div class="item">Content</div>
            <div class="item">Content</div>
        </div>
    </div>
</div>
于 2012-04-09T22:03:08.147 に答える
0

1ページに2つのスクロールバー? それでは、なぜ両方のウィジェットが同じ id を持っているのでしょうか?

于 2012-04-13T11:14:07.620 に答える