Home/ Questions/Q 8582549
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T21:19:10+00:00

I have a webkit scrollbar attached to a div. I have disabled the default

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0