customize vertical and horizonal scrollbar differently using css?

Question

I'm trying to add two different styles for horizontal an vertical scrollbars.

I want both horizontal and vertical scrolls in my document but with different thicknesses. I want to hide the vertical scrollbar but keep it scrollable.

How do I achieve that?

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

Let me google this for you https://css-tricks.com/almanac/properties/s/scrollbar/ — Huangism, Oct 27 '22 at 15:05
Does this answer your question? [CSS customized scroll bar in div](https://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div) — Berci, Oct 27 '22 at 15:12
This is not a site to ask people to write code for you. [tour] [ask] [Help] Inform yourself. — philipxy, Nov 02 '22 at 08:05
See [How do comment replies work?](https://meta.stackexchange.com/q/43019/266284) to learn to use `@x` to notify 1 non-sole non-poster commenter `x` per comment about that comment. Posters, sole commenters & followers of posts always get notified. Without `@` other commenters get no notification. — philipxy, Nov 02 '22 at 11:48

score 2 · Answer 1 · answered Oct 27 '22 at 15:08

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

Supercool · Accepted Answer · 2022-11-02T11:05:41.510

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 class="scroll-container" style="width: 200px; height: 180px; overflow: scroll;">
  <div style="width:300px; height:300px;">
    <h1>Hello World</h1>
  </div>
</div>

I edited to move the start of your original self-answer post into the question post because it is part of the question so that is where it belongs. You should not have rolled back my edit. [ask] [answer] [Help] PS A "basically" or "essentially" or "in other words" that doesn't summarize a clear, precise & full description that you also give just means "unclearly" or "it is false that". When it introduces one it is unnecessary & misleading. — philipxy, Nov 02 '22 at 11:41

customize vertical and horizonal scrollbar differently using css?

2 Answers2