How to show a mode without changing content to the left?


For a bootstrap modal. Is there a way to achieve both:

  1. Avoid the background content behind the modal from being scrollable

  2. When opening the modal, the background content should not shift to the right because of removed scrollbars

The best solution I have so far is:

.modal-open {
    overflow-y: scroll !important;

But it has the problem that the background content is still scrollable when the modal is showing.

body.modal-open {
    overflow: hidden;

This works for me without any shift.