无法滚动附加到 div 的垂直滚动条答案

【问题标题】：Unable to scroll a vertical scrollbar attached to a div无法滚动附加到 div 的垂直滚动条
【发布时间】：2012-09-12 21:12:05
【问题描述】：

我有一个附加到 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>

【问题讨论】：

我们也可以看看 HTML 文件吗？
works for me

标签： html css webkit

【解决方案1】：

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

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

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

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

【讨论】：

非常感谢！！像魅力一样工作:)
我有一个后续问题。我实际上是在 iframe 中使用此网页，该网页将托管在父 div 下。这个特定的父 div 将在运行时不断调整大小。所以我不能保持容器 div 的静态固定高度（以像素为单位）。关于如何使这个东西在这种情况下工作的任何指示？简单地在运行时根据托管 iframe 的父级的大小调整容器高度是行不通的。