CODEWITHSUNDEEP
csswebkitscrollbar
beardofzaius
beardofzaius

Reputation: 161

Is there a way to make transparent custom scrollbar track in webkit browsers?

I'm trying to style scrollbars which will appear on DIV's in a design I'm working on. It's webkit only so figured I could get quite a way with just CSS rather than plugins.

Unfortunately I've hit a major issue. The design requires the scrollbars to overlap the content with a transparent effect, much like OS X Mountain Lion / iOS.

When custom styles are applied to the scrollbar however it resizes the content to fit the scrollbar in. I've managed to size the content so that in the inspector it shows its under the scrollbar now, but I can't seem to make the scrollbar track transparent.

I've tried applying these to both the ::-webkit-scrollbar and ::-webkit-scrollbar-track regions:

None seem to work. Before I give up and try a JavaScript custom scrollbar solution, thought I'd see if anyone else had an answer.

* {
  list-style:none;
  margin:0;
  padding:0;
}
body {
  padding:20px;
}
#content {
  background:#333;
  height:400px;
  padding:1px;
  width:398px;
}
#content li {
  background:#666;
  height:100px;
  margin-bottom:10px;
  width:400px;
}
.scrollable-content {
  overflow-x:hidden;
  overflow-y:scroll;
}
.scrollable-content::-webkit-scrollbar {
  background:transparent;
  width:30px;
}
.scrollable-content::-webkit-scrollbar-track {
  background:transparent;
}
.scrollable-content::-webkit-scrollbar-thumb {
  background:#999;
}
<ol class="scrollable-content" id="content">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

I've checked these already:

webkit css scrollbar styling

How to prevent a webkit-scrollbar from pushing over the contents of a div?

CSS: Possible to "push" Webkit scrollbars into content?

Upvotes: 16

Views: 30290

Answers (1)

Mat Bloom
Mat Bloom

Reputation: 140

I've updated your fiddle example -> http://jsfiddle.net/F9p7S/

Try this approach:

.scrollable-content::-webkit-scrollbar * {
    background:transparent;
}
.scrollable-content::-webkit-scrollbar-thumb {
    background:#999 !important;
}

Upvotes: 4

Related Questions