CSS3 - How to "restore" ::-webkit-scrollbar property to the default scroll bar

UPDATE 2022

I answered this almost 10 years ago and seems like after 2021 this solution stop working, read the solution from @Volomike, it might get you where you want to.

I just realized you can set all the properties in auto; and will do the trick. This is a self answer but I guess someday someone can have the same question.

/*Scroll bar nav*/
::-webkit-scrollbar {
    width: auto;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: auto; 
    -webkit-border-radius: auto;
    border-radius: auto;
    background:auto;    
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius:auto;
    border-radius:auto;
    background:auto; 
    -webkit-box-shadow:auto; 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: auto; 
}

I don't know if exist another method.

-- UPDATE -- Look like you can also use the initial and unset value //reverting all the values

::-webkit-scrollbar {
    all:unset;
}

or apply to an specific one {width : unset} || {width : initial}

NOTE: Using unset will not work on IE11


Use the initial value or unset value for the properties you want to revert (depending on how exactly you want to revert them).

Both these values can be applied to all CSS properties.

example

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

or

::-webkit-scrollbar {
    width: unset;
}

If you want to revert all properties of a rule then you should use the all keyword

example

::-webkit-scrollbar-thumb {
    all:unset;
}

Notice: No IE support for any of these as of yet.
Varying levels of support for each browser (see the linked docs for details)

Tags:

Html

Css

Ipad

Recent Posts