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

Question

我有一個附加到div的webkit滾動條。 我通過在body元素中將overflow屬性設置為hidden來禁用默認滾動條。 我可以看到附加到div的滾動條，但看不到它的拇指，因此也無法滾動。 附加滾動條的div具有id =“container”。 這是css -

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>

Answer 1

因為#container的高度為100％，所以滾動條“thumb”沒有理由顯示，因為容器實際上足夠大以適應其整個內容。 如果你給它一個固定的像素高度，你的“拇指”將出現並且功能很好。 這是一個例子。

如果你用另一個包裝器包裝你的容器並給它position: relative; 您可以將容器放在100％高度，但要添加

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

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

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

問題描述

1 個解決方案

解決方案1
4 已采納 2012-09-12 21:27:23

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

問題描述

1 個解決方案

解決方案1 4 已采納 2012-09-12 21:27:23

解決方案1
4 已采納 2012-09-12 21:27:23