webkit css scrollbar styling

Question

Is there any way of getting rid of the scroll track entirely? Or making it overlay the content rather than pushing it aside? Like iOS/Lion scrollbars?

The following gets pretty close, but even though the track is transparent, the content of the scrollable region is pushed over and the page background shows through.

::-webkit-scrollbar {  
    width:8px;
    height:8px;
    -webkit-border-radius: 4px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
    background-color:transparent;
}

::-webkit-scrollbar-thumb {  
    background-color: rgba(053, 057, 071, 0.3);
    width: 6px;
    height: 6px;
    -webkit-border-radius:4px;
}

Solution

Hmm, I thought I answered this one previously, maybe not:

• Hide the overflow on the body
• wrap the entire content of the site or whatever you're scrolling with a div,
• Incude css properties for the div (overflow:scroll or overflow-y:scroll).

Now you can set the track css to any opacity using rgba(0,0,0,0.3) because the scroll is not part of the body.

Another tip for customizing firefox scroll bar if you want to experiment is to:

• Do the overflow thing and to overlay the scrollbar (via z-index) with a transparent div of whatever color you like,
• Position the div over the entire scroll section (probably something like position:absolute; right:0; if you're using the scroll for the entire window)
• Use pointer-events: none; on the divs css to make it semi-transparent.

It will give the firefox scroll a little color/ texture. (May be ideal to force the scroll to the right for comparability)

I've not tried it yet but it's do-able

Comments

[nicholas]

I'm not sure I understand what you mean. Check out this plunk: plnkr.co/edit/hbBT0lehOHlD0cizHmVn?p=preview. What I'm looking to do is get the red paragraphs to fit all the way to the right, and the blue scroll thumb to float over them. If I could pull the blue scroll thumb away from the edges a bit too, even better.