CSS3 scrollbar styling on a div

Question

How can I style webkit scrollbars with CSS3?

I mean these properties:

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

Here is my div tag:

<div class="scroll"></div>

Here is my current CSS:

.scroll {
    width: 200px; height: 400px;
    overflow: hidden;
}

`overflow: hidden` hides any scrollbars, so there's nothing to decorate with CSS3. You have to make scrollbars visible with `overflow:scroll` or `overflow:auto` — keaukraine, Sep 09 '12 at 09:07

jacktheripper · Accepted Answer · 2012-09-09T09:11:52.017

145

Setting overflow: hidden hides the scrollbar. Set overflow: scroll to make sure the scrollbar appears all the time.

To use the ::webkit-scrollbar property, simply target .scroll before calling it.

.scroll {
   width: 200px;
   height: 400px;
    background: red;
   overflow: scroll;
}
.scroll::-webkit-scrollbar {
    width: 12px;
}

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

.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

See this live example

edited Sep 09 '12 at 09:11

answered Sep 09 '12 at 09:04

jacktheripper

13,953
12
57
93

Thanks this works. Is there a way we could do the same for mozilla browser? – Om3ga Sep 09 '12 at 09:12
Not without jQuery/JavaScript. See this question http://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox – jacktheripper Sep 09 '12 at 09:12
This scrollbar design is very nice, I used it in more than one project. – MrAlbino Aug 29 '23 at 12:00

score 1 · Answer 2 · answered Sep 09 '12 at 09:08

You're setting overflow: hidden. This will hide anything that's too large for the <div>, meaning scrollbars won't be shown. Give your <div> an explicit width and/or height, and change overflow to auto:

.scroll {
   width: 200px;
   height: 400px;
   overflow: scroll;
}

If you only want to show a scrollbar if the content is longer than the <div>, change overflow to overflow: auto. You can also only show one scrollbar by using overflow-y or overflow-x.

score 1 · Answer 3 · answered Oct 14 '14 at 04:48

1

The problem with the css3 scroll bars is that, interaction can only be performed on the content. we can't interact with the scroll bar on touch devices.

answered Oct 14 '14 at 04:48

user2845300

11
1

score 0 · Answer 4 · answered Sep 09 '12 at 09:04

0

.scroll {
   width: 200px; height: 400px;
   overflow: auto;
}

answered Sep 09 '12 at 09:04

Meisam Mulla

1,845
3
23
37

CSS3 scrollbar styling on a div

4 Answers4

Linked