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

How can I change the width, height and color of scrollbar used on DIV element ?
0
give a positive ratinggive a negative rating
12 Nov 2020 at 05:33 PM
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>


0
give a positive ratinggive a negative rating
15 Nov 2020 at 01:29 PM
Tim
Share on FacebookShare on TwitterShare on LinkedInSend email
x
x
Follow us on Facebook
2022 AnswerTabsTermsContact us