All geek questions in one place

Unable to scroll vertical scrollbar attached to div

I have a webkit scrollbar attached to a div. I turned off the default scrollbar by setting the overflow property hidden in the body element. I can see the scroll bar that is attached to the div, but cannot see its thumb, and therefore also cannot scroll. In the div to which the scroll bar is attached, there is 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 contains a div (with id = "Title") and a table. The table has a lot of content, so scrolling should happen, but, unfortunately, this does not happen. If someone could indicate what I am doing wrong, that would be great. Thanks!

Edited: adding 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>
+4
source share
1 answer

Since your #container is 100% tall, there is no reason to appear on the thumb scroll bar because the container is actually large enough to fit all of its contents. If you give it a fixed pixel height, your thumb will appear and function beautifully. Here is an example .

If you apply your container with another wrapper and give it position: relative; , you can leave your container with a height of 100%, but add

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

If you are really trying to do this, replace the main browser scroll bar for the page, just replace the #container body with your selectors ::-webkit-scrollbar , ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb .

+3
source

Source: https://habr.com/ru/post/1433895/

More articles:


All Articles