Is it possible to customize vertical and horizonal scrollbar differently using css?-CodePudding

I'm trying to add two different styles for horizontal an vertical scrollbars. Can you tell me how to achieve that?`

<div  style="width: 200px; height: 200px; overflow: scroll;">
     <div style="width:300px; height:300px;">
        <h1>Hello World</h1>
     </div>
    </div>

CodePudding user response：

::-webkit-scrollbar {
  width: 4px;
  border: 1px solid #d5d5d5;
}

::-webkit-scrollbar-track {
  border-radius: 0;
  background: #eeeeee;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: blue;
}

 ::-webkit-scrollbar-thumb:horizontal{
        background: red;
        border-radius: 1px;
 }

You can do something like this to style both of them

CodePudding user response：

Basically I wanted to have both horizontal and vertical scrolls in my document but I wanted to have different thicknesses for them. To be specific, I wanted to hide vertical scrollbar but keep it scrollable. Turns out, if you set width, it will change the thickness of vertical scroll and if you set height, it'll change the thickness of horizontal scroll.

.scroll-container{
  background: grey;
}
.scroll-container::-webkit-scrollbar{
  width: 5px; /*sets the thickness of vertical scroll  */
  height: 8px; /*sets the thickness of horizontal scroll */
}
.scroll-container::-webkit-scrollbar-thumb{
  background-color: red;
  border-radius: 10px;
}
.scroll-container::-webkit-scrollbar-track{
  background-color: black;
}

<div  style="width: 200px; height: 180px; overflow: scroll;">
  <div style="width:300px; height:300px;">
    <h1>Hello World</h1>
  </div>
</div>