Scrollbar CSS design - change width, height, color on DIV

How can I change the width, height and color of scrollbar used on DIV element ?

Hi,

You can create a custom scrollbar with specific width, height or colors by using the solution below. To apply the style for the DIV scrollbar, you can link the CSS with DIV element by class name.

The code should look like:


<style>

.content {
width: 500px;
height: 250px;
overflow: auto;
}

/* scrollbar width */
.content::-webkit-scrollbar {
width: 15px;
}

/* scrollbar track */
.content::-webkit-scrollbar-track {
background-color: #EEEEEE;
}

/* scrollbar handle */
.content::-webkit-scrollbar-thumb {
background-color: #CCCCCC;
height: 30px;
border-radius: 15px;
}

/* scrollbar handle on hover */
.content::-webkit-scrollbar-thumb:hover {
background-color: #999999;
}

</style>

<div class='content'>
Add more content here.
</div>