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

Question

Hi I'm using the next css code to style scroll bars in Safari and Chrome. And works really great but I´m facing the next issue, I would like te restore the default value, when I view the site on my ipad. I'm using @media css for achived this but, I don't know how to restore the defaults values.

@media screen and (min-width: 768px) and (max-width: 1024px) {  }



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

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background:#FFF;    
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(204,204,204,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(204,204,204,0.4); 
}

ncubica · Accepted Answer · 2019-04-16T18:24:58.493

39

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

edited Apr 16 '19 at 18:24

answered Jan 30 '12 at 07:03

ncubica

7,736
7
52
72

6

nothing works once it has been set with a property it seems like it's completely "stuck" with it (tested Chrome `v88`) – vsync Jan 22 '21 at 21:26
1

Sorry but I don't think your answer is right. As a simple example, try adding `*::-webkit-scrollbar:{all:unset !important} *::-webkit-scrollbar-thumb:{all:unset !important}` to https://www.youtube.com stylesheets. The scrollbar will not be reverted, but instead disappear. – phil294 Nov 02 '21 at 16:25
Niether of these solutions does the jobb. I've tried both but I'm not able to restore to the default scrollbar. – David Feb 28 '22 at 13:09
I answered this literally 10 years ago, no one complained before 2021, maybe something changed ¯\_(ツ)_/¯ who knows. But if you are dealing with this issue right now. Would be more beneficial for the community to post and update the answer after your research is finished. More than one "this doesn't work" comment, really doesn't help anybody :) – ncubica Mar 01 '22 at 23:13

score 6 · Answer 2 · answered Jan 15 '15 at 13:22

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)

score 2 · Answer 3 · answered Feb 05 '21 at 19:09

As commenter vsync mentioned, once you've hid the scrollbar, if you add a new css rule to show the scrollbar, it doesn't work as expected.

Can be solved with JS

let styles = document.getElementsByTagName('style');

for(let i = 0; i < styles.length; i++) {
    let style = styles[i];

    let rules = style.sheet.cssRules;

    for(let r = 0; r < rules.length; r++) {

        let rule = rules[r];

        if(rule.selectorText === '::-webkit-scrollbar') {
            style.sheet.deleteRule(r);
        }
    }
}

This doesn't work with cross-site style files. See https://stackoverflow.com/questions/63790794/get-css-rules-chrome-extension the site that's messing me up is https://tempostorm.com/ — ubershmekel, May 05 '21 at 00:21

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

3 Answers3

Linked