Answered There’s a lateral movement when the vertical scrollbar is activated

[htmlcssjavascript28]

code: Edit fiddle - JSFiddle - Code Playground

How do I prevent slight shift sideways when the vertical scrollbar kicks in?

1st: Launch the code snippet in full screen mode.

Next: Click the exit button that fades in to see the shift occur.

How do I keep everything aligned at all times?

Before the scroll bar kicks in?

Before clicking the exit button is the 1st image.

After is the 2nd image.

What would need to be adjusted in the code to fix that?

That is all I am trying to do here.

It seems nothing I have tried has worked.

And ideas on what will?

You see the shift occur after the exit button is clicked, right?

How would I keep everything aligned?

So there is no shift.

Image Example 1:



Image Example 2:

 

[Johna]

You could use overflow: scroll; to always show the scrollbar even when there's nothing to scroll.
Or, alternatively, you could also use scrollbar-gutter: stable; to reserve the space for the scrollbar, but not actually show the scrollbar until there's content to scroll, however, this CSS property is not supported in Safari yet.

scrollbar-gutter - CSS: Cascading Style Sheets | MDN

The scrollbar-gutter CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.

developer.mozilla.org

P.S. I've noticed in quite a few of your posts, you don't give any feedback when an answer it given. This could discourage users from answering your questions as they don't know if their solution worked for you or not.

 

[htmlcssjavascript28]

Where would scrollbar-gutter: stable; be placed in the code?

 

[Johna]

Where would scrollbar-gutter: stable; be placed in the code?

The element that has the scrollbar, normally the body and/or the html element.