I want to change the width color and height of the scroll bar only of my sidebar in the dashboard. I have seen in the many pages that browser scrollbar and specific container(with overflow property) differs. when i try to change the scroll bar property of it, browsers scrollbar changes too. So anybody please help me to change the propety of specific container scrollbar. Thankyou.
.container{
height:100px;
overflow:auto;
display: block;
}
.container::-webkit-scrollbar{
width:5px;
background-color:#000;
}
.container::-webkit-scrollbar-thumb{
background:red;
border-radius:5px;
}<div style="height:800px">
<div class="container">
<p>A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument.A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument.A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument.A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument.</p>
</div>
</div>You can change scrollbar of any container like this:
.container{
overflow: scroll;
height: 100px;
background-color: yellow;
display: block;
}
.container::-webkit-scrollbar {
width: 5px;
height: 8px;
background-color: black;
}
.container::-webkit-scrollbar-thumb {
background: red;
}
.inner-container{
height: 800px;
}<div class="container">
<div class="inner-container">inner container</div>
</div>It's quite simple. You can do this using -webkit-scrollbar.
HTML
<div class="custom-scroll">
</div>
CSS
.custom-scroll {
overflow: auto;
}
.custom-scroll::-webkit-scrollbar {
width: 10px;
}
.custom-scroll::-webkit-scrollbar-track {
background: red;
}
.custom-scroll::-webkit-scrollbar-thumb {
background: grey;
}