微小的滾動條插件 - 概述div儘管固定寬度包裝

我正在使用Tiny滾動條插件與Jquery查看圖片相冊。它工作正常，除了一個包裝問題。微小的滾動條插件 - 概述div儘管固定寬度包裝

例子：http://67.23.251.125/~emelieze/test/index.php?t=collage&p=collage/Test&scroll=yes

正如你可能可以看到一排不佈置圖像（或者說包含圖像的div），他們這樣做只是爲您滾動到右側。 overview-div有一個固定的寬度和高度，但它仍然包裹到viewport-div（黑色邊框顯而易見）。overview-div的寬度是用php計算的，所以將它放在樣式表中不是一個選項。

的滾動條的div和它的內容是這樣的：

<div id='scrollbar2' > 
<div class='viewport' style='height: 330px; '> 
    <div class='overview' style='width: 2560px; height: 330px; '> 

    <div class='scrollimage' style='width: 500px;'> 


    <img src='cms/album/collage/Test/blue.png'> 
    <br> 
    example 3</div>  
    <div class='scrollimage' style='width: 500px;'> 


    <img src='cms/album/collage/Test/green.png'> 
    <br> 
    example 5</div>  
    <div class='scrollimage' style='width: 500px;'> 


    <img src='cms/album/collage/Test/orange.png'> 
    <br> 
    example 1</div>  
    <div class='scrollimage' style='width: 500px;'> 


    <img src='cms/album/collage/Test/red.png'> 
    <br> 
    example 4</div>  
    <div class='scrollimage' style='width: 500px;'> 


    <img src='cms/album/collage/Test/yellow.png'> 
    <br> 
    example 2</div> 

    </div> 
    </div> 

    <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div></div></div></div>

的CSS：

#scrollbar2 { margin: 0px auto 40px auto; clear: both;} 
#scrollbar2 .viewport { overflow: hidden; position: relative; } 
#scrollbar2 .overview { list-style: none; padding: 0; margin: 0; position: absolute; border: 1px solid black; overflow: hidden;} 
#scrollbar2 .scrollbar { position: relative; overflow: hidden; margin: 0px; clear: both; height: 15px; } 
#scrollbar2 .track { background-color: #EEE; height:4px; position: relative; padding: 0px; } 
#scrollbar2 .thumb { background-color: #CCC; background-position: 100% -15px; height: 4px; cursor: pointer; overflow: hidden; position: absolute; left: 0; top: 0px; } 
#scrollbar2 .thumb .end{ overflow: hidden; background-position: 0 -15px; height: 13px; width: 5px;} 
#scrollbar2 .disable { display: none; } 

.scrollimage {float: left; border: 0px solid #000; position:relative; margin:0px 10px 0px 0px;}

裏面頭標籤：

$(document).ready(function(){var scroll = $('#scrollbar2,.scrollbar,.small_menu,.track,.viewport'); 
scroll.css('width', (screen.width)/1.5 + 'px')}); 

$(window).bind('load',function(){ 

$('#scrollbar2').tinyscrollbar({ axis: 'x'}); 
});

我怎樣才能阻止概述-div從包裝到viewport-div？

來源

2011-03-21 Kakafoni

您應該將總覽設置爲與所有div合併的大小相同，因此5 x 500 = 2500像素。視口應該有固定的大小。它可以是動態的，但是你將不得不使用tinyscrollbar更新方法。

來源

2011-03-28 13:11:35 Baijs

微小的滾動條插件 - 概述div儘管固定寬度包裝

回答

相關問題