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.

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.

• javascript
• html
• css
• webkit
• scrollbar

3 Answers 3

.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>

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;       
}

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>