18

Normally a scrollbar is positioned like this:

________________________________________
|                          |           |
|         content          | scrollbar |
|                          |           |
|                          |           |
|                          |           |
|                          |           |
|__________________________|___________|

I'm basically looking to have a gap between a "custom" scrollbar and the outer boundary of a scrollable container:

________________________________________
|                    |           |     |
|      content       | scrollbar | gap |
|                    |     <     |     | 
|                    |           |     |
|                    |           |     |
|                    |           |     |
|____________________|___________|_____|

Using a margin-right on either ::-webkit-scrollbar or ::-webkit-scrollbar-track-piece fails and the announcement of the style–able scrollbars for Webkit states:

Margins are supported along the axis of the scrollbar. They can be negative (so that the track can for example be inflated to cover the buttons partially).

I'm now wondering if anyone has managed to push the scrollbars "into" the content (or out of the wrapper for that matter) by some other means than margin.

I'm assuming that this might be possible only (if even) using some kind of trick — any ideas?

Other things I've tried unsuccessfully are padding-right: 10px and border-right: 10px solid rgba(255, 255, 255, 0) (a transparent border).

polarblau
  • 17,649
  • 7
  • 63
  • 84

2 Answers2

21

You can do it with a transparent border. But you need to set background-clip: padding-box; or it won't work.

Example: http://jsfiddle.net/6KprJ/1/

passsy
  • 5,162
  • 4
  • 39
  • 65
  • While this is a neat trick, the border seems to be applied centered around the outlines of the thumb which effectively changes the look of the thumb as well depending on how ‘thick’ the border is, right? – polarblau Oct 15 '13 at 17:21
6

I think thats not possible by assigning a right margin to a right-aligned scrollbar. The scrollbar is part of the window-UI and may not be styled via CSS.

However you can just create an content-wrapper around all other elements of your HTML, give it a max-width, which is smaller then 100% and set overflow: scroll; for the wrapper. This will achieve the desired effect and work in nearly all browsers.

[personal opinion] I think it's a very bad habit of certain web-designers, who want to control every piece of my screen. For example the scrollbars should be styled by the window-manager not by the website I'm currently viewing.

feeela
  • 29,399
  • 7
  • 59
  • 71
  • 2
    Thanks for your answer. And your solution works of course fine, but doesn't really answer my question (which is admittedly a experiment). I do agree more or less with your personal opinion as well. However things have changed since people have done horrible things to IE scrollbars. I am — for one — working on a browser application in which the main window is not scrollable. Therefore the scrollbar is not part of the browser's chrome but rather a input element of an application, not a web site. But that as well is just personal opinion. – polarblau Jul 16 '11 at 21:16
  • On the other hand, if you are moving the main-window-scrollbar, how would you use the new cleared space. You can't display anything if there is no HTML-element to place the contents into. So thats just empty space behind the scrollbar, even if you would get it managed to move it. – feeela Jul 16 '11 at 22:39
  • 1
    White space is not useless space ;) – polarblau Jul 17 '11 at 08:08