CSS3 webkit-scrollbar hidden when not needed

Question

I have the following code to style custom scrollbars, but when the scrollbar is not needed because the content is not very long, I would like to hide the scrollbar. Is this possible?

Here's the code I have so far...

.myscroll::-webkit-scrollbar {
    width: 15px;     
}

.myscroll::-webkit-scrollbar-track {
    border-radius: 3px;
    background-color:#D4D4D4;
}

.myscroll::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color:#0085bf ;
}

K K · Accepted Answer · 2014-05-19 12:55:19Z

2

Assuming that the element is having class myscroll, you can try following css

    .myscroll{
        overflow:auto;
    }

It might solve your issue.

edited May 19, 2014 at 12:55

answered May 19, 2014 at 9:28

K K

18.2k4 gold badges33 silver badges39 bronze badges

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

2 Comments

Tom Over a year ago

This still shows a blank scrollbar when you hover over the element.

K K Over a year ago

setting overflow:auto in .myscroll doesn't work for you?

Collectives™ on Stack Overflow

CSS3 webkit-scrollbar hidden when not needed

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related