Home/ Questions/Q 6162097
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T21:35:43+00:00

Normally a scrollbar is positioned like this: ________________________________________ | | | | content |

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0