Menu
I have a webkit scrollbar attached to a div. I have disabled the default scrollbar by setting the overflow property to hidden, in the body element. I can see the scrollbar which is attached to the div, but cannot see its thumb, and hence also not able to scroll. The div to which scrollbar is attached has id="container". Here is the 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);
}
The container hosts a div (with id="Title"), and a table. The table has lot of content, so scrolling should happen, but unfortunately it doesn't. If someone could please point out what am I doing wrong, that would be great. Thanks!
Edited : Adding the 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>
410
Because your #container has a height of 100%, the scrollbar "thumb" has no reason to appear because container is actually big enough to fit the entirety of its contents. If you give it a fixed, pixel height, your "thumb" will appear and function beautifully. Here's an example.
If you wrap your container with yet another wrapper and give it position: relative; you can leave your container with a 100% height, but add
position: absolute;
top: 0;
left: 0;
If what you're really trying to do is replace the main browser scroll bar for the page, just replace #container with body for your ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb selectors.
143
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
