CSS - scrollable div with hidden scroll bar
12,005
Solution 1
You just need to add some padding-right
in order to hide the scroll-bars.
html, body {
background-color: #111111;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #fff;
font : 12px Arial,Courier New,Tahoma;
}
.layoutWrapper {
width: 100%;
height: 100%;
display: flex;
}
.layoutHead {
width: 100%;
height: 200px;
background-color: #171616;
color: #444;
line-height: 200px;
font-size: 100px;
text-align: center;
}
.layoutNav {
background-color: #333333;
width: 250px;
height: 100%;
overflow: hidden;
}
.layoutNavWrapper {
width: 250px;
height: 100%;
padding-right: 15px; /* added */
overflow-y: scroll;
}
.layoutNavWrapper ul {
width: 240px;
padding: 0;
margin: 0 0 0 5px;
}
.layoutNavWrapper ul li {
width: 240px;
height: 40px;
line-height: 40px;
margin: 5px 0 0 0;
list-style-type: none;
}
.layoutNavWrapper ul li a {
color: #e8ecf3;
background: #212020 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWMICAhoYCAK4FQJAH+kAuF/Y9FHAAAAAElFTkSuQmCC) repeat;
text-decoration: none;
display: block;
width: 220px;
height: 40px;
padding-left: 20px;
}
.layoutNavWrapper ul li a:hover {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWPIzc31ZSAK4FQJAI0YAylSFqZ7AAAAAElFTkSuQmCC) repeat;
-webkit-box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.08);
-moz-box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.08);
box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.08);
}
.layoutContent {
display: inline-block;
width: calc(100% - 250px);
height: 100%;
}
<div class="layoutWrapper">
<div class="layoutNav">
<div class="layoutNavWrapper">
<ul>
<li>
<a href="">Startseite</a>
</li>
<li>
<a href="">Mein Profil</a>
</li>
<li>
<a href="">Profil bearbeiten</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
<li>
<a href="">Platzhalter</a>
</li>
</ul>
</div>
</div>
<div class="layoutContent">
<div class="layoutHead">
>_ Keyboard Hobby
</div>
</div>
</div>
Solution 2
You can try this to hide the scrollbar.
::-webkit-scrollbar {
display: none;
}
Solution 3
Here is a previous answer: Hide scroll bar, but while still being able to scroll.
To fix yours, I've adapted the above answer thus:
.layoutNav {
background-color: #333333;
width: 250px;
height: 100%;
overflow: hidden;
}
.layoutNavWrapper {
width: 250px;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}
Here is a working pen.
Author by
Daniel Schmitt
Updated on June 04, 2022Comments
-
Daniel Schmitt almost 2 years
I can't get my navigation scroll to work without scroll bars.
I found many examples here, but they are not working.
I tired parent class with overflow: hidden; and child class with overflow-y: auto;
Does anybody knows what's wrong in my CSS?
...........................................................................
Here is the snippet:
html, body { background-color: #111111; width: 100%; height: 100%; padding: 0; margin: 0; color: #fff; font : 12px Arial,Courier New,Tahoma; } .layoutWrapper { width: 100%; height: 100%; display: flex; } .layoutHead { width: 100%; height: 200px; background-color: #171616; color: #444; line-height: 200px; font-size: 100px; text-align: center; } .layoutNav { background-color: #333333; width: 250px; height: 100%; overflow: hidden; } .layoutNavWrapper { width: 250px; height: 100%; overflow-y: scroll; } .layoutNavWrapper ul { width: 240px; padding: 0; margin: 0 0 0 5px; } .layoutNavWrapper ul li { width: 240px; height: 40px; line-height: 40px; margin: 5px 0 0 0; list-style-type: none; } .layoutNavWrapper ul li a { color: #e8ecf3; background: #212020 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWMICAhoYCAK4FQJAH+kAuF/Y9FHAAAAAElFTkSuQmCC) repeat; text-decoration: none; display: block; width: 220px; height: 40px; padding-left: 20px; } .layoutNavWrapper ul li a:hover { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWPIzc31ZSAK4FQJAI0YAylSFqZ7AAAAAElFTkSuQmCC) repeat; -webkit-box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.08); -moz-box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.08); box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.08); } .layoutContent { display: inline-block; width: calc(100% - 250px); height: 100%; }
<div class="layoutWrapper"> <div class="layoutNav"> <div class="layoutNavWrapper"> <ul> <li> <a href="">Startseite</a> </li> <li> <a href="">Mein Profil</a> </li> <li> <a href="">Profil bearbeiten</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> <li> <a href="">Platzhalter</a> </li> </ul> </div> </div> <div class="layoutContent"> <div class="layoutHead"> >_ Keyboard Hobby </div> </div> </div>
-
GoofBall101 over 6 yearsWhat scroll bar are you trying to get rid of?
-
Daniel Schmitt over 6 yearsMy left navigation has a scrolling bar, I want it scrollable without a scoll bar.
-
ferhado over 6 yearsHere is an example: codepen.io/JonAnderDev/pen/XJNOPr , this way work on all browthers
-
-
Nitneq about 4 yearsCool ! Ok for chrome or safari, but not for Firefox.