79

Is it possible to increase the width of a scrollbar on a <div> element placed inside the <body>?

I am not talking about the default scrollbar on the browser itself, this page runs in full screen mode and because the browser scrollbar never comes into picture, the inner <div> element has its own scrollbar.

6 Answers 6

150

This can be done in WebKit-based browsers (such as Chrome and Safari) with only CSS:

::-webkit-scrollbar {
    width: 2em;
    height: 2em
}
::-webkit-scrollbar-button {
    background: #ccc
}
::-webkit-scrollbar-track-piece {
    background: #888
}
::-webkit-scrollbar-thumb {
    background: #eee
}​

JSFiddle Demo


References:

5
  • 1
    This doesn't work in Edge 40.15063.674.0 as of 10/24/2017. Grrr.
    – enigment
    Commented Oct 24, 2017 at 11:34
  • 4
    Well, Edge is not a WebKit based browser.
    – Oliver
    Commented Oct 18, 2018 at 9:01
  • 42
    @Oliver you're never going to guess what happened.
    – baacke
    Commented Jun 5, 2019 at 23:48
  • This worked very well! Commented Oct 21, 2021 at 15:06
  • for firefox use: * { scrollbar-width: thin; } Commented Jan 8, 2022 at 8:29
41

If you are talking about the scrollbar that automatically appears on a div with overflow: scroll (or auto), then no, that's still a native scrollbar rendered by the browser using normal OS widgets, and not something that can be styled(*).

Whilst you can replace it with a proxy made out of stylable divs and JavaScript as suggested by Matt, I wouldn't recommend it for the general case. Script-driven scrollbars never quite behave exactly the same as real OS scrollbars, causing usability and accessibility problems.

(*: Except for the IE colouring styles, which I wouldn't really recommend either. Apart from being IE-only, using them forces IE to fall back from using nice scrollbar images from the current Windows theme to ugly old Win95-style scrollbars.)

2
  • 1
    Hi bobince, You are right, its an overflow:scroll/auto scrollbar. I did try jScrollPane suggested by Matt but its degrading the performance of scrolling by a huge margin.
    – t0mcat
    Commented Oct 29, 2010 at 16:32
  • @TomasM can you provide examples or a link? Commented Dec 20, 2016 at 15:50
19

You can stablish specific toolbar for div

div::-webkit-scrollbar {
width: 12px;
}

div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}

see demo in jsfiddle.net

1
  • 5
    Not on Edge, not on Firefox
    – Mishax
    Commented Aug 25, 2016 at 13:08
10

This sets the scrollbar width:

::-webkit-scrollbar {
  width: 8px;   // for vertical scroll bar
  height: 8px;  // for horizontal scroll bar
}

// for Firefox add this class as well
.thin_scroll{
  scrollbar-width: thin; // auto | thin | none | <length>;
}
1

Yes.

If the scrollbar is not the browser scrollbar, then it will be built of regular HTML elements (probably divs and spans) and can thus be styled (or will be Flash, Java, etc and can be customized as per those environments).

The specifics depend on the DOM structure used.

2
  • Hi David, So whats the process to modify a scrollbar? The only CSS tags I know for styling are related to coloring only.
    – t0mcat
    Commented Oct 29, 2010 at 15:21
  • 1
    #whateverElementyouAreFakingTheScrollbarWith { width: <length> }
    – Quentin
    Commented Oct 29, 2010 at 15:23
0

My experience with trying to use CSS to modify the scroll bars is don't. Only IE will let you do this.

1
  • 1
    webkit now allows this ::-webkit-scrollbar-[track|thumb|button|corner]
    – Trevor
    Commented Dec 17, 2013 at 19:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.