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.

Rutul Patel · Accepted Answer · 2018-10-24 03:16:45Z

9

@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/

answered Oct 24, 2018 at 3:16

Rutul Patel

6832 gold badges10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joao Castro · Accepted Answer · 2024-11-02 17:15:56Z

How are you? I was having the same issue and I just figured out how yo solve it. In this other question Change the width of horizontal scroll bar it was suggested to use the following code

.inner::-webkit-scrollbar-track-piece:end {
  margin-right: 50px; 
}

.inner::-webkit-scrollbar-track-piece:start {
  margin-left: 50px;
}

This code scpecifically didn't work to me, but it gave me the thought "What if I added a margin to the ::-webkit-scrollbar-track css?", so I tried it and it worked! Here's how it looked like:

.slider-track-class::-webkit-scrollbar-track {
  background: #D8D8D8;
  border-radius: 10px;
  margin-right: 210px; <--
  margin-left: 210px; <--
}

I hope it helps (even tho you asked that 6yrs ago haha)

Edit: After some research I also found a similar solution in this question: How to change the width of horizontal scrollbar track?

Collectives™ on Stack Overflow

Change width of Horizontal scroll bar. Custom scrollbar?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related