Change the scroll bar width, color and height of specific container with overflow property-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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>