10

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;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
nicholas
  • 14,184
  • 22
  • 82
  • 138
  • Why not use a custom scrollbar, such as jQuery-based [jScrollPane](http://jscrollpane.kelvinluck.com/)? You can style it to lay over the content, if you want. – Artyom Aug 28 '11 at 23:58
  • 4
    I've tried jScrollPane, as well as few of my own solutions using css3 translates, css positions, etc... none are as fast as an actual scrollbar. It just seems like a lot of extra overhead for something already built into the browser. If it's possible to use the existing scrollers rather than some javascript fake, it just seems like a better idea. – nicholas Aug 30 '11 at 10:16
  • I've found http://www.baijs.nl/tinyscrollbar/ to work great and is fast (in terms of the response of the content to the scrolling) and very easy to set up. – HandiworkNYC.com Jan 10 '12 at 21:10
  • You cam give margin-right as -8px wherever the scrollbar tends to appear. though this is more of a hack way but it should get you going. – anuj_io Mar 20 '12 at 05:41

1 Answers1

1

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

frontsideup
  • 2,833
  • 1
  • 21
  • 23
  • I'm not sure I understand what you mean. Check out this plunk: http://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. – nicholas Jul 04 '13 at 22:58