0

我知道这可以有一个简单的解决方案,但我找不到方法。

我正在使用这个 JQuery 插件(TinyScrollbar)构建一个水平“滚动框”:http: //baijs.nl/tinyscrollbar/

我在每一页上都有两个“滚动框”,但里面有不同的“子”框(在一行中)。

这是第一个“小部件”的 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>

这是第二个“小部件”的 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>

每个“项目”都有固定的高度和宽度(即 100 像素)和向左浮动(用于一行显示)。所有项目都由具有“概述”类的 div 包含。“概述”的 CSS

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

我的问题是:当“项目”> 三个或 < 三个以连续显示所有项目时,如何动态更改 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

一页上有2个滚动条?那么为什么两个小部件具有相同的 id 呢?

于 2012-04-13T11:14:07.620 回答