Question

I am styling some scrollbars on a webpage for webkit, and I want the track to be semi-transparent so that some of the background image bleeds through, but when I insert an RGBa value, it treats it just like an RGB value (without any alpha-channel). Does ::-webkit-scrollbars not accept RGBa? I know it doesn't accept anything like transitions, so did WebKit skip out on other cool effects too?

Code:

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: rgba(57,57,57, .6);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(156, 156, 156, .6);
}

(But - on my side - it is treating rgba as just a plain rgb value)

Was it helpful?

Solution

Checkout my vertical jsfiddle for doing it with a vertical page. I setup a transparent track with a background image with the following:

::-webkit-scrollbar-track {
    background: rgba(57,57,57, .6);;
}

For a horizontal page, checkout this horizontal fiddle. The difference with the horizontal code is I setup the page to be 100% height:

body, html, .scrolls {
    height: 100%;   
}

Then I wrapped the page content in a div, which is where the scrolling will happen, not on the page itself, like so:

.scrolls { 
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;
    background-image: url('http://www.evokia.com/images/large-background.jpg');
} 

This is the workaround for the fact that it appears that the horizontal scroll on the page never gets the background of the page, so in order to get the transparent track we needed to create the scroll in the page.

OTHER TIPS

I'm pretty sure webkit does support RGBa values, I've used body::-webkit-scrollbar-track{} which has worked fine.

I've also used the Jscroll pane plugin, which I've found to be very intuitive and this does support rgba values too. This can also support full webpage customised scroll bars and IE 7+ as well.

Is it possible to see your code to see if ther are any issues?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top