How to show webkit scrollbar which has been hidden using display:none css property?

Question

On a page I am having a webkit scrollbar which has been hidden using display: none css property.

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

In one of my app level css files I tried to override the above css rule, but I wasn't able to display the scrollbar

I tried changing the css but I couldn't the get exact scrollbar which would have been there if display: none property was not present.

#element::-webkit-scrollbar {
    -webkit-appearance: none;
     width: 7px;
     display: block;
}

#element::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

The above css made the scroll bar visible but it gave me ugly scroll bar (probably due the css rules I have used).

Is there a simple way in which I can display the webkit scrollbar which would been there if the display:none property was not present. I can not change the display:none as it is being inherited by my app. I can only over-ride that rule.

EDIT:

An exactly similar question was asked How to override "::-webkit-scrollbar" CSS rule and make scrollbar visible again, but it seems that also doesn't have an accepted answer.

Use a class like allow-scroll, then select with #element:not(.allow-scroll)::-webkit-scrollbar for your display: none. Then just add/remove the class with JavaScript. — SeinopSys
– SeinopSys, Commented Sep 5, 2014 at 12:08
Unfortunately ::-webkit-scrollbar only supports in Chrome Browser ! — Atal Shrivastava
– Atal Shrivastava, Commented Sep 5, 2014 at 12:08
@DJDavid98: I didn't exactly get what you meant by "then select with #element:not(.allow-scroll)::-webkit-scrollbar for your display: none". Can it be done by css alone? — TheRock
– TheRock, Commented Sep 5, 2014 at 12:13
Webkit Vertical Scrollbar This could help you on better understanding on webkit scrollbar — Atal Shrivastava
– Atal Shrivastava, Commented Sep 5, 2014 at 12:15

nvbach91 · Accepted Answer · 2023-02-10 23:56:27Z

1

you can do something like this

*:not(.excluded-element)::-webkit-scrollbar { display: none; }

reads as: apply it to everything except the .excluded-element

answered Feb 10, 2023 at 23:56

nvbach91

1868 bronze badges

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

Comments

void · Accepted Answer · 2024-03-22 12:59:07Z

0

Not a full solution, but somewhat working approach is proposed in this SuperUser answer: https://superuser.com/a/1685163/814616

The catch is in reverting not only display property, but all scrollbar related rules. That resets all colors, though, so they need to be redefined.

answered Mar 22, 2024 at 12:59

void

2,79916 silver badges30 bronze badges

Comments

Manuel Romero · Accepted Answer · 2014-09-05 12:13:20Z

-1

If the display:none is what it's hiding it why don't you just overwrite the display instead of adding that other properties?

Try overwriting the display with the different values it can has:

https://developer.mozilla.org/en-US/docs/Web/CSS/display

answered Sep 5, 2014 at 12:13

Manuel Romero

342 bronze badges

1 Comment

TheRock Over a year ago

I tried all the options display property can have, but none seem to work.

Sami Hult · Accepted Answer · 2022-08-29 07:25:16Z

-1

Edit: Does not seem to work, as pointed out in the comments.

I was able to restore the scrollbars using

#element::-webkit-scrollbar {
    display: unset;
}

edited Aug 29, 2022 at 7:25

answered Apr 24, 2019 at 7:45

Sami Hult

3,0821 gold badge14 silver badges17 bronze badges

1 Comment

Jonathan de Jong Over a year ago

Not even this works. I've tried every possible value but it seems if you have set display:none it is non-reversible. Same conclusion as @TheRock

Collectives™ on Stack Overflow

How to show webkit scrollbar which has been hidden using display:none css property?

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related