htmlcssscrollbar

Change size of scrollbar thumb with CSS

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:

What I want

Solution

  • Another way to do it is assigning border on either side of the track

    border-left: 3px solid white;
border-right: 3px solid white;

    CSS

    .cute_scroll::-webkit-scrollbar {
    width: 10px;
    background-color: #f8bbd0;
}

.cute_scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #f06292;
    border-radius: 10px;
    background-color: #f8bbd0;

    /* Add Border on Track */
    border-left: 3px solid white;
    border-right: 3px solid white;
}

.cute_scroll::-webkit-scrollbar-thumb {
    border-radius: 20px;
    -webkit-box-shadow: inset 0 0 px #ad1457;
    background-color: #e91e63;
}

    Result

    screenshot of pink scrollbar

    https://codepen.io/hiteshsahu/pen/eGQOwJ