Issue
I want to get a scrollbar with a thumb larger than the track.
I can change the color, the opacity, everything, but I don’t know how to change the size of the thumbs and the track separately.
.custom_scrollbar::-webkit-scrollbar {
width: 1px;
}
.custom_scrollbar::-webkit-scrollbar-track {
background-color: rgb(255, 255, 255);
-webkit-border-radius: 1px;
}
.custom_scrollbar::-webkit-scrollbar-thumb:vertical {
background-color: rgb(142, 142, 142);
-webkit-border-radius: 0px;
-webkit-width:5;
}
.custom_scrollbar::-webkit-scrollbar-thumb:vertical:hover {
background: rgba(0, 245, 255, 0.65);
}
#page {
width: 75%;
overflow-y: scroll;
overflow-x: hidden;
height: 100px;
z-index: 30;
margin: 5%;
padding: 3%;
}<div id="page" class=".custom_scrollbar">
<h1>cool</h1>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text FIN :D </p>
</div>This is what I want it to look like:
Solution
This is a really old post, but I have a working solution that does ‘EXACTLY’ what was asked for. Also, this will come in handy for anybody else needing this solution.
/* SCROLLBAR */
/* Let's get this party started */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: rgb(0,0,0);
border: 4px solid transparent;
background-clip: content-box; /* THIS IS IMPORTANT */
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgb(25,25,25);
border: 1px solid rgb(0,0,0);
}
It is very important to set background-clip: content-box for this to work. You will be left with a track that is thinner than the scroll-bar-thumb. Cheers!!
Answered By – L-Train
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0