How to make scrollbar overlapping page content

I have this same requirement in my project.

Here is the solution:

overflow: overlay

Hope it helps

As Anugraha Acharya said, the only CSS option is:

overflow: overlay;

But it is worth noting that this has been deprecated, so there is no telling how long it will work in Chromium / Webkit.

It is not supported in Firefox so, you will have to do the following to ensure Firefox can scroll too:

overflow: scroll;
overflow: overlay;

With this, Firefox will render like the "Normal" diagram in the original post and Chromium will render like "how I want scroll to look". Also, if Chromium ever drops it it will still be usable.

This currently works as of January 2022.

---

I believe, by deprecated, Mozilla means that it was never officially added rather than it was considered and has now been dropped. So, hopefully, it will be considered and made official. In the meantime, you take your own risk.