CSS: Possible to “push” Webkit scrollbars into con

问题:

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).

回答1:

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.

回答2:

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/