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.

Knotweed

hi, does this link work for you? css-tricks.com/examples/WebKitScrollbars – Cupo

@KheemaPandey My question is how to make scrollbar visible again after making it invisible. I haven't found an answer by the link provided. – Knotweed

@s.ermakovich: Were you able to get this working? I have a similar situation. – Eolanda

@TheRock, unfortunately no. It seems that ::-webkit-scrollbar completely overrides default scrollbar, and there is no way to reset this override. – Knotweed

Answer 1

try

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

and

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

Edit:

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

Motherland

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 – Motherland

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

@Knotweed 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 – Motherland

Answer 2

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;
}

Botfly