Change width of Horizontal scroll bar. Custom scrollbar?

Question

I have a div with multiple cards which scrolls horizontally and by since I'm using

overflow-x: scroll;

I get a horizontal scroll bar under my div which I do want. That be said the bar takes up the width of the div but I'd rather have a more custom scroll bar which would only take up 50%-75% of the div.

Is there a way in css/js that would allow me to change the width of a HORIZONTAL scrollbar, all signs seem to point to no. If that's the case does anyone have experience creating a custom scrollbar.

My initial thought was to create an input slider which has the same number of ticks per card and scroll to each card onChange, but I can figure out if Window.scrollTo() works with horizontal scroll.

Answer 1

@ben

Yes, You can control height and width of your ScollBar using webkit.

::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

Here is the important link. https://webkit.org/blog/363/styling-scrollbars/