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

How can I change the width, height and color of scrollbar used on DIV element ?
12 Nov 2020 at 05:33 PM
0pnshow more
StorStor
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>


15 Nov 2020 at 01:29 PM
0pnshow more
TimTim
Share on FacebookShare on TwitterShare on LinkedInSend email
Follow us on Facebook & Twitter
2022 AnswerTabsTermsContact us