Menu
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).
581
We can use the CSS “::-webkit-scrollbar” property which is responsible for changing the shape, color, size, shade, shadow, etc. of the scroll bar. But, here the property which we will use is the direction property of CSS for changing the position of the scroll bar.
The scrollbar width First, we need to define the size of the scrollbar. This can be the width for vertical scrollbars, and the height for horizontal ones. With that set, we can style the scrollbar itself.
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
To show the scrollbars always on the webpage, use overflow: scroll Property. It will add both horizontal and vertical scrollbars to the webpage. To add only horizontal scrollbar use overflow-x: scroll property and for vertical scrollbar use overflow-y: scroll property.
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/
135
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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
