A centered div changes position when a scroll appears

Question

I have a div container that is centered (on the edge-left: auto and margin-right: auto), and the page design looks great when loading ... Below this div is another hidden one that appears at the user's request. But when this happens, the browser scroll appears and ruins my design, because the centered div also moves a few pixels to the left (so that it can again be in the center).

Can this behavior be stopped?

An alternative solution is to add overflow-y: scroll, but I found that overflow-y is not supported by all browsers, and I can’t find which browsers ... Can anyone post a link where I can see the support list browser for css3 functions?

Answer 1

This css will always show vertical scroll on your page. By default, it overflows: auto;

body {
    overflow-y: scroll;
}

Answer 2

Scrolling is always displayed, maybe not suitable for the layout.

Try limiting css3 body width

body {
    width: calc(100vw - 34px);
}

vwis the width of the viewport (see this link for some explanation) to
calccalculate in css3
34pxmeans double the width of the scroll bar (see this for fixed or this for calculation if you don't trust fixed sizes)