无法滚动连接到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的垂直滚动条

回答

相关问题