gpt4 book ai didi

html - 无法滚动附加到 div 的垂直滚动条

转载 作者:搜寻专家 更新时间:2023-10-31 08:20:30 25 4
gpt4 key购买 nike

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

最佳答案

因为您的 #container 的高度为 100%,滚动条“缩略图”没有理由出现,因为容器实际上足够大以容纳其全部内容。如果你给它一个固定的像素高度,你的“拇指”就会出现并运行得很漂亮。 Here's an example .

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

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

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

关于html - 无法滚动附加到 div 的垂直滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12396257/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com