Question

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

我正在使用这个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>

每个“项目”都有一个固定的高度和宽度（即100px）并向左浮动（一行显示）。所有项目都由div包含“概述”类。 “概述”的CSS

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

我的问题是：当“items”为＆gt;时，如何动态更改div的宽度三个或者＆lt;三个显示连续的所有项目？我知道我可以使用插件的更新功能，但我不知道如何实现它。

我正在使用此JavaScript

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

Answer 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>
</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>

Answer 2

1页上有2个滚动条？那为什么两个小部件都有相同的ID？

动态调整DIV宽度JQuery

2 个答案: