Bootstrap modal elimina la barra de desplazamiento

Cuando activo una vista modal en mi página, hace que la barra de desplazamiento desaparezca. Es un efecto molesto porque la página de fondo comienza a moverse cuando el modal entra / desaparece. ¿Existe una cura para ese efecto?

Esta es una característica, la clase modal-opense agrega al HTMLbody cuando muestra el modal y se elimina cuando lo oculta.

Esto hace que la barra de desplazamiento desaparezca ya que el bootstrap css dice

.modal-open {
    overflow: hidden;
}

Puede anular esto especificando

.modal-open {
    overflow: scroll;
}

en su propio css.

Creo que heredar es mejor que scroll porque cuando abres modal, siempre se abrirá con scroll, pero cuando no tienes ningún scrolls tendrás el mismo problema. Así que solo hago esto:

.modal-open {
  overflow: inherit;
}

solía

.modal-open {
  overflow-y: scroll;
}

En este caso, evita mostrar la barra de desplazamiento horizontal

Es mejor usar overflow-y: desplácese y elimine el relleno del cuerpo, bootstrap modal agregó relleno al cuerpo de la página.

.modal-open {
  overflow:hidden;
  overflow-y:scroll;
  padding-right:0 !important;
}

Compatible con el navegador IE: el navegador IE hace lo mismo de forma predeterminada.

¡Gracias a Dios me encontré con esta publicación! Me estaba tirando de los pelos tratando de averiguar cómo recuperar mis barras de desplazamiento al cerrar la ventana usando mi propio vínculo cercano. Probé las sugerencias para CSS pero simplemente no funcionaba correctamente. Despues de leer

class modal-open se agrega al cuerpo HTML cuando muestra el modal, y se elimina cuando lo oculta. - @flup

Se me ocurrió una solución usando jquery, así que en caso de que alguien más tenga el mismo problema y las sugerencias anteriores no funcionen -

<script>
            jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
 jQuery('body').removeClass('modal-open');
                });
            });
        </script>

Estaba jugando con esta 'característica' de los modales de Bootstrap. Parece que la .modalclase tiene overflow-y:auto;Entonces, el contenedor modal obtiene su propia barra de desplazamiento cuando el modal en sí se vuelve alto.

Si siempre desea una barra de desplazamiento (los diseñadores suelen hacerlo), primero configure el cuerpo

body {
    overflow-y:scroll;
}

Entonces maneja .modal-open

.modal-open .modal {
    overflow-y:scroll; /* Force a navbar on .modal */
}

.modal-open .topnavbar-wrapper {
    padding-right:17px; /* Noticed that right aligned navbar content got overlapped by the .modal scrollbar */
}

Deje la barra de desplazamiento deshabilitada en el cuerpo sin tocar en este caso

Todas las demás respuestas en esta página hicieron que mi contenido saltara.

¡Aviso!

Aunque esta solución me funcionó todo el tiempo, ayer tuve un problema al usar esta solución cuando el modal se puede arrastrar y es demasiado grande para ajustarse a la pantalla (verticalmente). ¿Podría tener algo que ver con los position:stickyelementos que agregué?

Mejor si crea su propio archivo css para personalizar cierta parte de su bootsrap.

No modifique el archivo css de bootstrap porque cambiará todo en su bootstrap una vez que lo use en otras partes de su página.

Si su página es algo larga, automáticamente proporcionará una barra de desplazamiento. Y cuando se abra el modal, ocultará la barra de desplazamiento porque eso es lo que hace bootstrap por defecto.

Para evitar ocultarlo cuando se abre modal, simplemente anótelo colocando el código css (a continuación) en su propio archivo css.

.modal-open {
    overflow: scroll;
}

solo al revés ...

.modal-open {
    overflow: hidden;
}

Además, si la ventana emergente modal necesita desplazarse con contenido dentro y el padre necesita permanecer quieto, agregue lo siguiente a su Custom.css (anulando css)

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
.modal-open {
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 0 !important;
}

el modal de bootstrap agrega un relleno una vez que se abre para que pueda probar este código en su propio css

.modal-open {
    padding: 0 !important;
}

Esto probablemente se deba a que el primer modal (cuando está cerrado) elimina la clase modal-open del elemento del cuerpo y el segundo no lo agregará de nuevo cuando se active modal-open.

En este caso, usaría event para verificar si el modal se ha cerrado / ocultado por completo y abrir otro

let modal1 = $('.modal1);
let modal2 = $('.modal2);
$modal1.on('hidden.bs.modal', function (e) {
   $modal2.modal('show');
});

Esto esperará hasta que se cierre el primer modal para asegurarse de que el modal-open se elimine del cuerpo y se vuelva a agregar cuando esté abierto.

Yo solo tuve este problema, y ​​encontrar esta pregunta rápidamente me ayudó a comprender qué estaba causando el comportamiento. Así que gracias.

Sin embargo, encuentro que estas soluciones CSS son un poco poco elegantes. A menos que, es decir, desee específicamente mantener las barras de desplazamiento (aunque no puedo pensar en una razón para eso).

Básicamente, Bootstrap aplica padding-right a ciertos elementos para compensar la eliminación de la barra de desplazamiento.

Por lo tanto, todo lo que necesita hacer es colocar una envoltura adicional con relleno de cero alrededor de su elemento problemático (y mover la clase a la que se dirige).

es decir, cambiar de esto ...

<div class="fixed-top p-1 bg-dark">
    ...this content will move as padding will be modified...
</div>

... a esto...

<div class="fixed-top p-0 bg-dark">
    <div class="p-1">
        ...this content won't move...
    </div>
</div>

La única respuesta que funcionó para mí es la siguiente:

.modal-open {
  padding-right: 0 !important;
}
html {
  overflow-y: scroll !important;
}