How to solve the problem with twitching of all content when opening a modal window?

Question

css

I think all beginners have faced similar problems, I spent a day trying to avoid jerking the general content when opening a modal window, or a menu with a background (any action that entails opening some block with position absolute, in full screen.
Problem The scrolling along the Y axis disappears, and due to this the content shifts.But how to make a modal window or a mobile menu when opened, namely, when this block appears with absolute positioning in full screen, does not pull the page.. I tried a lot of things Help meeeeeee please, what is the solution how to figure it out and how to solve the problem.

Answer 1

catch from the checked, then I think you will add 2 + 2

function getScrollWidth(){

  var inner=document.createElement('p');
  inner.style.width="100%";
  inner.style.height="200px";

  var outer=document.createElement('div');
  outer.style.position="absolute";
  outer.style.top="0px";
  outer.style.left="0px";
  outer.style.visibility="hidden";
  outer.style.width="200px";
  outer.style.height="150px";
  outer.style.overflow="hidden";
  outer.appendChild(inner);

  document.body.appendChild(outer);
  var w1=inner.offsetWidth;
  outer.style.overflow='scroll';
  var w2=inner.offsetWidth;

  if(w1==w2){
  
    w2=outer.clientWidth;
  }

  document.body.removeChild(outer);

  return (w1-w2);
};

Answer 2

what is the solution of the same bootstrap not like? they set for body padding
https://getbootstrap.com/docs/4.4/components/modal...

Answer 3

You described the default behavior of the modal window opener in Bootstrap. There it is set overflow: hidden;on the body when the window is opened to prevent the content from scrolling at the same time as the modal scrolls.
Accordingly, something tells me that you are using a boot or another framework that does this, because beginners rarely guess at such a feature.
And if you have already shot yourself in the foot by yourself, without any boots, then look who exactly hangs this overflow, you yourself or some modal script that you built into the project.
PS: when opening a modal window, this is the most correct behavior of the page, you can only, if it bothers you a lot, set the behavior of the page elements by the transition property (I do not recommend).

Answer 4

1. Nobody bothers not to turn off page scrolling, just put a curtain with position: fixed on top of it. and already on top of it popup.
2. About the fact that the content is shifting - I didn’t really understand why so much attention is given to this. I'll tell you a secret: there are a lot of operating systems in which the scroll hangs on top of the window content and does not affect its content, and may not be visible at all until the mouse is moved to the edge of the window. Therefore, to invent something due to the fact that in Windows the window changes in size by the width of the scroll, how much is there, in the region of 30 pixels? This is 1.5% of the Full HD width - stupid enough. Especially when you consider that during the opening of the window some kind of animation is shown, and the user sees that the window is being redrawn.
For example, I have it like this in the settings, someone has it set to "always", in other axes there may be no scroll at all