modal bootstrap remove barra de rolagem

Quando eu acionar uma visualização modal na minha página, ela faz com que a barra de rolagem desapareça. É um efeito irritante porque a página de fundo começa a se mover quando o modal entra / desaparece. Existe cura para esse efeito?

Este é um recurso, a classe modal-opené adicionada ao HTML bodyquando você mostra o modal e removida quando você o oculta.

Isso faz com que a barra de rolagem desapareça, pois o CSS do bootstrap diz

.modal-open {
    overflow: hidden;
}

Você pode substituir isso especificando

.modal-open {
    overflow: scroll;
}

em seu próprio css.

Eu acho que herdar é melhor do que rolar porque quando você abre modal, ele sempre abrirá com rolar, mas quando você não tiver nenhum pergaminho você terá o mesmo problema. Então, eu só faço isso:

.modal-open {
  overflow: inherit;
}

eu usei

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

Neste caso você evita exibir a barra de rolagem horizontal

É melhor usar overflow-y: role e remova o preenchimento do corpo, bootstrap modal adicionado ao corpo da página.

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

Compatível com o navegador IE: o navegador IE faz a mesma coisa por padrão.

Graças a Deus encontrei este post! Eu estava puxando meu cabelo tentando descobrir como fazer minhas barras de rolagem voltarem ao fechar a janela usando meu próprio link de fechamento. Tentei as sugestões para CSS, mas não estava funcionando corretamente. Depois de ler

a classe modal-open é adicionada ao corpo do HTML quando você mostra o modal e removida quando você o oculta. - @flup

Eu vim com uma solução usando jquery, então caso outra pessoa tenha o mesmo problema e as sugestões acima não funcionem -

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

Eu estava apenas brincando com esse 'recurso' dos modais Bootstrap. Parece que a .modalclasse tem overflow-y:auto;Então, o wrapper modal obtém sua própria barra de rolagem quando o próprio modal torna-se muito alto.

Se você sempre quiser uma barra de rolagem (os designers costumam fazer) Primeiro defina o corpo

body {
    overflow-y:scroll;
}

Então manuseie .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 */
}

Deixe a barra de rolagem desativada no corpo intocada neste caso

Todas as outras respostas nesta página continuaram fazendo meu conteúdo pular.

Atenção!

Embora essa solução funcionasse para mim o tempo todo, ontem eu tive um problema ao usar essa correção quando o modal é arrastável e grande demais para caber na tela (verticalmente). Pode ter algo a ver com os position:stickyelementos que adicionei?

Melhor se você criar seu próprio arquivo css para personalizar uma certa parte de sua embalagem de inicialização.

Não altere o arquivo css do bootstrap porque ele mudará tudo em seu bootstrap assim que você usá-lo em outras partes de sua página.

Se sua página for um pouco longa, ela fornecerá automaticamente uma barra de rolagem. E quando o modal for aberto, ele irá ocultar a barra de rolagem porque é isso que o bootstrap faz por padrão.

Para evitar ocultá-lo quando o modal for aberto, basta substituí-lo colocando o código css (abaixo) em seu próprio arquivo css.

.modal-open {
    overflow: scroll;
}

apenas vice-versa ...

.modal-open {
    overflow: hidden;
}

Além disso, se o pop-up modal precisar rolar com o conteúdo interno e o pai precisar permanecer imóvel, adicione o seguinte ao seu Custom.css (substituindo css)

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

o modal de bootstrap adiciona um preenchimento assim que abre para que você possa tentar este código em seu próprio css

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

Isso provavelmente ocorre porque o primeiro modal (quando fechado) remove a classe aberta modal do elemento de corpo e o segundo não a adiciona de volta quando dispara a abertura modal.

Nesse caso, eu usaria o evento para verificar se o modal foi fechado / escondido totalmente e abriria outro

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

Isso irá esperar até que o primeiro modal seja fechado para garantir que o modal aberto seja removido do corpo e adicionado novamente quando aberto.

Eu mesmo tive esse problema e encontrar essa pergunta rapidamente me ajudou a entender o que estava causando o comportamento. Então obrigado.

No entanto, acho essas soluções alternativas CSS um pouco deselegantes. A menos que você queira especificamente manter as barras de rolagem (embora eu não consiga pensar em um motivo para isso).

Essencialmente, o Bootstrap está aplicando padding-right a certos elementos para compensar a remoção da barra de rolagem.

Portanto, tudo o que você precisa fazer é colocar um invólucro extra com preenchimento zero ao redor do elemento problemático (e mover a classe que está sendo direcionada para ele).

ou seja, mude disso ...

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

... para isso...

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