CSS: Possible to “push” Webkit scrollbars into content?

Question

Normally a scrollbar is positioned like this:

________________________________________
|                          |           |
|         content          | scro         


        

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

Answer 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/