無法滾動連接到div的垂直滾動條

我有一個webkit滾動條連接到div。我已經通過在body元素中將overflow屬性設置爲隱藏來禁用默認滾動條。我可以看到連接到div的滾動條，但看不到它的大拇指，因此也無法滾動。滾動條所連接的div具有id =「container」。這裏是css -無法滾動連接到div的垂直滾動條

html 
{ 
}  
body 
{ 
    overflow-y:hidden; 
    overflow-x:hidden; 
} 

#container 
{ 
    height:100%; 
    overflow-x:hidden; 
    overflow-y:scroll; 
} 

#Title 
{ 

    padding-bottom: 10px; 
} 

table 
{ 
    width: 100%; 
    table-layout: fixed; 
} 

#container::-webkit-scrollbar 
{ 
    background: transparent; 
    width: 12px; 
} 

#container::-webkit-scrollbar-track 
{ 
    -webkit-box-shadow: inset 0 0 6px rgba(10,11,12,0.3); 
    /* border-radius: 10px; */ 
} 

#container::-webkit-scrollbar-thumb 
{ 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    background:rgba(104,102,102,0.8); 
}

容器主持一個div（id =「Title」）和一個表。該表有很多內容，因此滾動應該發生，但不幸的是它不會。如果有人能指出我做錯了什麼，那會很好。謝謝！

編輯：添加HTML -

<body> 
<div id="container"> 
<div id="Title"> 
    <span id="Heading_part_1">abc</span> 
    <span id="Heading_part_2">xyz</span> 
    <span id="Heading_part_3">pqr</span> 
    <span id="Timestamp"></span> 
    <span id="WrenchIconContainer" onclick="togglemenu();"> 
     <input type="image" src="res/wrench-arrow-icon.png" width="18px" height="18px"/> 
    </span> 
    <div id="menu_container" style="display:none"> 
     <p id="id1">sfdf</p><p id="id2" onclick="dosomething();">ffsdf</p> 
    </div> 
</div> 
<table id="table1" cellspacing="0" width="auto"> 
<thead> 
<tr> 
    <th id = "headline" width="85%"></th> 
    <th id = "storytime" width="15%"></th> 
</tr> 
    </thead> 
<tbody> 
</tbody> 
</table> 
</div> 
</body>

來源

2012-09-12 Tejas

我們還可以看看HTML文件嗎？ –

[適合我]（http://jsfiddle.net/crowjonah/FFMxb/） – crowjonah

因爲你#container具有100％的高度，滾動條「拇指」沒有理由出現，因爲容器實際上是足夠大，以適應其內容的全部。如果你給它一個固定的像素高度，你的「拇指」將會出現並且功能非常漂亮。 Here's an example。

如果用另一種包裝包住的容器，並給它position: relative;你可以用100％的高度留下您的容器，但增加

position: absolute; 
top: 0; 
left: 0;

如果你真正想要做的是更換主瀏覽器滾動條爲頁面，只需將#container替換爲您的::-webkit-scrollbar，::-webkit-scrollbar-track和::-webkit-scrollbar-thumb選擇器。

來源

2012-09-12 21:27:23 crowjonah

非常感謝！作品像一個魅力:) – Tejas

我有一個後續問題。我實際上是在一個iframe中使用這個網頁，它將在父div下託管。這個特殊的父分區將在運行時不斷調整大小。所以我不能以像素爲單位保持容器div的靜態固定高度。任何關於如何使這件事情在這種情況下工作的指針？根據託管iframe的父級調整大小，在運行時簡單地修改容器高度不起作用。 – Tejas

無法滾動連接到div的垂直滾動條

回答

相關問題