html - How to offset for scrollbar width with css?

Question

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

I had to set these properties and make my scrollbar appear on top of the page because it was making my lightbox jitter when I clicked on an image.

html {
 overflow-y: scroll;
 overflow-y: overlay;
}

However on mobile this makes it seem like I have no margin on the right as it appears behind the scrollbar.

Is there a way that I can offset my content on the right to match the scrollbars width, while still keeping it on top of everything?

The container the images are inside has 4% margin on the left and right but the scrollbar is displaying over it on the right.

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T19:06:11+0000

I figured out a solution to my problem that did not involve knowing the width of the scroll bar.

First of all the question was poorly formulated for 2 reasons:

On mobile devices the scrollbar is not the same as on large screens so it does not get in the way
It did interfere with my lightbox plugin (fancybox) but the solution is much simpler

If anyone comes here because of a similar issue, the solution was to apply

overflow-y: scroll;
overflow-y: overlay;

to the <body> tag instead of html as the lightbox plugin could overwrite it that way once you click on an image.