2012-02-10 81 views
0

CSS微小的滾動條設置高度視口,當它消失

/* Tiny Scrollbar */ 
#scrollbar1 { width: 559px; margin: 20px 0 10px; clear: both;} 
#scrollbar1 .viewport { width: 500px; height: 1050px; overflow: hidden; position: relative; } 
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; } 
#scrollbar1 .scrollbar{ background: transparent url(images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 11px; } 
#scrollbar1 .track { background: transparent url(images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:9px; position: relative; padding: 0 1px; } 
#scrollbar1 .thumb { background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 20px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; } 
#scrollbar1 .thumb .end { background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 20px; } 
#scrollbar1 .disable { display: none; } 

當我設置.viewport超過700像素,則滾動條不顯示。我不明白。

PS。因爲我用的是直接從演示中,我沒有貼碼,但以防萬一:

$(document).ready(function(){ 
     $('#scrollbar1').tinyscrollbar({ size: 360 });; 
    }); 

好吧,我只是嘗試另一個JScrollPane的滾動和同樣的事情發生。這裏是site,所以你可以看到我正在嘗試做什麼。現在它不顯示其餘的內容,如果我將其更改爲1050像素,但它將滾動消失。

如果有任何可以讓我知道的代碼我不知道還有什麼要做的。

回答

0

使用圖像設置圖像的高度和寬度。滾動條不能正確計算視口的度量,因爲它的初始化過程中圖像仍在加載。

+0

所以我這樣做,但它顯示了圖像完成的地方,其餘的文本已經消失(隱藏).. – Andres 2012-02-16 15:46:57

+1

您的字體顏色設置爲白色。檢查身體的CSS樣式。 – 2012-02-24 06:51:30

+0

是的,因爲這是一個iframe,坐在另一個頁面的背景是黑暗的,但這不是問題。 – Andres 2012-02-24 19:13:22