bootstrap modal rimuove la barra di scorrimento

Quando attivo una visualizzazione modale nella mia pagina, la barra di scorrimento scompare. È un effetto fastidioso perché la pagina di sfondo inizia a muoversi quando il modale si sposta / scompare. Esiste una cura per quell'effetto?

Questa è una caratteristica, la classe modal-openviene aggiunta all'HTMLbody quando mostri il modale e rimossa quando lo nascondi.

Questo fa scomparire la barra di scorrimento poiché il css bootstrap dice

.modal-open {
    overflow: hidden;
}

Puoi sovrascriverlo specificando

.modal-open {
    overflow: scroll;
}

nel tuo css.

Penso che l' ereditarietà sia meglio dello scorrimento perché quando apri modal, si aprirà sempre con lo scorrimento, ma quando non hai alcuna pergamena avrai lo stesso problema. Quindi faccio solo questo:

.modal-open {
  overflow: inherit;
}

ero solito

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

In questo caso si evita di visualizzare la barra di scorrimento orizzontale

È meglio usare overflow-y: scorrere e rimuovere imbottitura dal corpo, imbottitura aggiunta modale bootstrap al corpo della pagina.

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

Compatibile con browser IE: browser IE che fa la stessa cosa per impostazione predefinita.

Grazie a Dio mi sono imbattuto in questo post! Mi stavo tirando fuori i capelli cercando di capire come recuperare le mie barre di scorrimento quando chiudevo la finestra usando il mio link vicino. Ho provato i suggerimenti per CSS ma semplicemente non funzionava correttamente. Dopo aver letto

class modal-open viene aggiunto al corpo HTML quando mostri il modal e rimosso quando lo nascondi. - @flup

Ho trovato una soluzione usando jquery, quindi nel caso in cui qualcun altro abbia lo stesso problema e i suggerimenti di cui sopra non funzionano -

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

Stavo solo giocando con questa "funzionalità" dei modali Bootstrap. Sembra che la .modalclasse lo abbia fattooverflow-y:auto; Quindi il wrapper modale ottiene la sua barra di scorrimento quando il modale stesso diventa troppo alto.

Se vuoi sempre una barra di scorrimento (spesso i designer lo fanno) Per prima cosa imposta il corpo

body {
    overflow-y:scroll;
}

Quindi gestisci .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 */
}

In questo caso, lasciare la barra di scorrimento disabilitata sul corpo intatta

Tutte le altre risposte in questa pagina continuavano a far saltare i miei contenuti.

Dritta!

Sebbene questa soluzione abbia sempre funzionato per me, ieri ho avuto un problema con questa correzione quando il modale è trascinabile e troppo grande per adattarsi allo schermo (verticalmente). Potrebbe avere qualcosa a che fare con gli position:stickyelementi che ho aggiunto?

Meglio se creerai il tuo file css per personalizzare una certa parte del tuo bootrap.

Non alterare il file css di bootstrap perché cambierà tutto nel tuo bootstrap una volta che lo usi in altre parti della tua pagina.

Se la tua pagina è piuttosto lunga, fornirà automaticamente una barra di scorrimento. E quando il modale viene aperto, nasconderà la barra di scorrimento perché è quello che fa il bootstrap come impostazione predefinita.

Per evitare di nasconderlo quando modal è aperto, è sufficiente sovrascriverlo inserendo il codice css (sotto) sul proprio file css.

.modal-open {
    overflow: scroll;
}

solo un viceversa ...

.modal-open {
    overflow: hidden;
}

Inoltre, se il popup modale deve scorrere con il contenuto all'interno e il genitore deve rimanere fermo, aggiungi quanto segue al tuo Custom.css (sovrascrivendo css)

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

il bootstrap modal aggiunge un padding una volta aperto in modo da poter provare questo codice nel proprio css

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

Ciò è probabilmente dovuto al fatto che la prima classe modale (quando chiusa) rimuove la classe modal-open dall'elemento body e la seconda non la aggiunge di nuovo quando si attiva l'apertura modale.

In questo caso, userei event per verificare se modal è stato chiuso / nascosto completamente e aprirne un altro

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

Questo attenderà fino alla chiusura del primo modale per assicurarsi che l'apertura modale venga rimossa dal corpo e aggiunta nuovamente all'apertura.

Ho avuto questo problema da solo e trovare questa domanda rapidamente mi ha aiutato a capire cosa stava causando il comportamento. Quindi grazie.

Tuttavia, trovo queste soluzioni alternative CSS un po 'ineleganti. A meno che, cioè, tu non voglia specificamente mantenere le barre di scorrimento (anche se non riesco a pensare a una ragione per questo).

Essenzialmente Bootstrap applica il riempimento destro a determinati elementi per compensare la rimozione della barra di scorrimento.

Pertanto, tutto ciò che devi fare è inserire un wrapper extra con zero padding intorno al tuo elemento problematico (e spostare la classe a cui è indirizzata su di esso).

cioè cambia da questo ...

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

... a questa...

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