How to reset webkit-scrollbar styles

Question

One of my design dependencies is styling the scrollbar and I would like it reset to the browser defaults.

I have applied the following styles in an attempt to remove the styling:

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

2. ::-webkit-scrollbar { all: initial;}

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

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

All styles applied to the scrollbar (colors, pointers etc.) were reset except for the width, which is always visible, but should instead autohide on Mac OS X and be visible in Windows.

The only way I was able to get all the styles to be fully reset was to manually remove them from my dependency. I would prefer to replace the styles in the standard way, using the cascade to override the undesired styles.

What styles should I apply to fully revert -webkit-scrollbar styling back to the browser defaults?

The question of how to reset -webkit-scrollbar styles has already been asked (here) but the solutions recommended in the responses do not resolve my problem.

Answer 1

This is because you need to place it as auto for the browser to apply the default behavior of it

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