How to override "::-webkit-scrollbar" CSS rule and make scrollbar visible again

Question

I use the following rule to make scrollbars invisible:

::-webkit-scrollbar { display: none; }

How do I override this rule to make scrollbars visible again? I tried the following:

::-webkit-scrollbar { display: initial; }

In this case scrollbars reserve their space, but the thumb is not visible.

See a short demo here.

hi, does this link work for you? css-tricks.com/examples/WebKitScrollbars — Kheema Pandey
– Kheema Pandey, Commented Feb 24, 2014 at 11:06
@KheemaPandey My question is how to make scrollbar visible again after making it invisible. I haven't found an answer by the link provided. — s.ermakovich
– s.ermakovich, Commented Feb 24, 2014 at 12:52
@s.ermakovich: Were you able to get this working? I have a similar situation. — TheRock
– TheRock, Commented Sep 5, 2014 at 12:49
@TheRock, unfortunately no. It seems that ::-webkit-scrollbar completely overrides default scrollbar, and there is no way to reset this override. — s.ermakovich
– s.ermakovich, Commented Sep 8, 2014 at 9:14

underscored · Accepted Answer · 2014-02-24 11:47:09Z

2

try

::-webkit-scrollbar { visibility: hidden; }

and

::-webkit-scrollbar { visibility: visible; }

Edit:

Though, that would keep the space... So, add "width: 0 !important;"

edited Feb 24, 2014 at 11:47

answered Feb 24, 2014 at 11:39

underscored

463 bronze badges

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

3 Comments

underscored Over a year ago

I've messed around with it: it appears that when you "unhide" the thing, the entire style of the scrollbar is overwritten with *blank. When you style the webkit-scrollbar yourself, it works. It's a bit circuitous, but it works. In the example it works with a media-query, but I don't know how you want to implement it? jsfiddle.net/KTmkD/1

s.ermakovich Over a year ago

The problem is that I don't need custom scrollbar. I just want to reset it to default style.

underscored Over a year ago

@s.ermakovich Webkit-scrollbar replaces the default scrollbar, as far as I know, so that's why it's so tricky to unhide the thing. I did find this, though. Maybe this will help? dynamicdrive.com/dynamicindex11/facescroll/index.htm

Khoa · Accepted Answer · 2023-10-10 04:37:02Z

After a while, i wanted to hide the scroll bar for my .horizontal-scroll class. This one worked for me:

Before:

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #f4f7f5;
}

::-webkit-scrollbar {
    width: 10px;
    background-color: #f4f7f5;
}

::-webkit-scrollbar-thumb {
    background-color: #222823;
}

.horizontal-scroll::-webkit-scrollbar {
    display: none !important;
}

After:

html::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #f4f7f5;
}

html:has(.horizontal-scroll)::-webkit-scrollbar {
    display: none !important;
}

html::-webkit-scrollbar {
    width: 10px;
    background-color: #f4f7f5;
}

html::-webkit-scrollbar-thumb {
    background-color: #222823;
}

Collectives™ on Stack Overflow

How to override "::-webkit-scrollbar" CSS rule and make scrollbar visible again

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related