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.