5

我有一个附加到 div 的 webkit 滚动条。我通过在 body 元素中将溢出属性设置为隐藏来禁用默认滚动条。我可以看到附加到 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>
4

1 回答 1

5

因为您#container的高度为 100%，滚动条“拇指”没有理由出现，因为容器实际上大到足以容纳其全部内容。如果你给它一个固定的像素高度，你的“拇指”就会出现并很好地发挥作用。这是一个例子。

如果你用另一个包装器包裹你的容器并给它position: relative;你可以让你的容器保持 100% 的高度，但是添加

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

如果您真正想要做的是替换页面的主浏览器滚动条，只需#container用 body 替换您的::-webkit-scrollbar、::-webkit-scrollbar-track和::-webkit-scrollbar-thumb选择器。

于 2012-09-12T21:27:23.387 回答