我知道这可以有一个简单的解决方案,但我找不到方法。
我正在使用这个 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'});
});