Custom scrollbar in a Chrome App

Question

I'd like to customize the scrollbar of my Chrome App with the CSS rule #2:

section { overflow: auto }
section::-webkit-scrollbar {
    width: 5px ;
}

Unfortunately, with the second rule, Chrome won't display the scrollbar. Without that second rule the default scrollbar is displayed as expected.

Is it a normal behavior? I checked the documentation but found nothing on that...

Answer 1

I believe it's not visible until you describe how to show it with ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb

CSSTricks lists this as a minimal example:

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}