Search code examples
javascriptgoogle-chromewebkitscrollbar

Chrome scrollbar takes up space but is invisible till styled

I have a PWA where I turn off scrollbars. for Chrome I've used: -

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

Now for non-touch PC users I want to turn scrollbars on for certain elements. The problem is when I get rid of "Display: None" I get the space for a scrollbar but it's invisible. When I style it (eg: background-color) I can see it.

Why is it invisible?

Solution

  • Spewin' When you define the pseudo element you have to take control of ALL attributes :-(

    Remove the CSS pseudo-element definition completely an the scrollbars go back to defaults.