web-dev-qa-db-fra.com

Bootstrap 3 se déclenche et provoque le décalage momentané de la page vers la gauche/problèmes de barre de défilement du navigateur

Je travaille sur un site utilisant Bootstrap 3.1.0.

Vous remarquerez que lorsque la fenêtre modale s'ouvre, la barre de défilement du navigateur disparaît pour une fraction de seconde, puis revient. Il fait la même chose quand vous le fermez.

Comment puis-je faire en sorte qu'il s'ouvre et se ferme sans aucune interaction de la barre de défilement du navigateur. J'ai vu des articles sur la pile où des gens rencontraient des problèmes, mais je ne trouve pas de réponse spécifique à mon problème. Par conséquent, si quelqu'un d'autre a fait cette demande et que quelqu'un le sait et veut me lier à cela, j'apprécierais il. J'ai cherché pendant environ 2 heures avant de poster.

html5twitter-bootstrapresponsive-designtwitter-bootstrap-3
63
Daniel White

c'est ce que j'ai trouvé dans github quand je cherche à propos de ce problème et pour moi cela fonctionne très bien

js: 

    $(document).ready(function () {
    $('.modal').on('show.bs.modal', function () {
        if ($(document).height() > $(window).height()) {
            // no-scroll
            $('body').addClass("modal-open-noscroll");
        }
        else {
            $('body').removeClass("modal-open-noscroll");
        }
    });
    $('.modal').on('hide.bs.modal', function () {
        $('body').removeClass("modal-open-noscroll");
    });
})

css utilisez ce css si vous avez nav-fixed-top et navbar-fixed-bottom :

body.modal-open-noscroll
{
    margin-right: 0!important;
    overflow: hidden;
}
.modal-open-noscroll .navbar-fixed-top, .modal-open .navbar-fixed-bottom
{
    margin-right: 0!important;
}

ou utilisez ce css si vous avez navbar-default

body.modal-open-noscroll 
{
  margin-right: 0!important;
  overflow: hidden;
}
.modal-open-noscroll .navbar-default, .modal-open .navbar-default 
{
  margin-right: 0!important;
}
19
user4314713
.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}

Va s'en débarrasser. Cela a été ajouté pour que les modaux fonctionnent de manière plus réactive, afin que vous puissiez faire défiler l'écran et voir un modal si l'écran était trop court. Cela empêche également le défilement de l’arrière-plan tant qu’un modal est actif. Si vous n'avez pas besoin de cette fonctionnalité, vous pouvez utiliser le css que j'ai posté.

Quelques informations supplémentaires: Ils définissent .modal-open sur le corps, ce qui empêche tout défilement sur le corps et masque la barre de défilement du corps. Ensuite, lorsque le modal arrive, l’arrière-plan sombre qui occupe l’ensemble de l’écran et overflow-y: scroll oblige la barre de défilement à revenir. fond sombre et voir le reste.

87
cjd82187

La résolution du problème du décalage gauche est facile à faire en utilisant CSS seul.

.modal-open[style] {
padding-right: 0px !important;
}

Vous écrasez simplement un style en ligne qui existe dans le code. J'utilise le mien dans une construction WordPress et le style en ligne était appliqué au corps. Ressemblait à ceci:

<body class="home blog logged-in modal-open" style="padding-right: 15px;">

J'espère que cela aide quelqu'un!

63
ben.kaminski
.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

.modal-open[style] {
    padding-right: 0px !important;
}

Merci à ben et cjd.

Le code ci-dessus semble fonctionner pour moi.

32
Tony S

Il s'agit d'un problème signalé lié à l'initialisation: https://github.com/twbs/bootstrap/issues/9855

Et ceci est ma solution rapide temporaire et fonctionne également à l'aide de la barre de navigation supérieure fixe, uniquement à l'aide de javascript. Chargez ce script avec votre page.

$(document.body)
.on('show.bs.modal', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth()
    if (scrollbarWidth) {
        $(document.body).css('padding-right', scrollbarWidth);
        $('.navbar-fixed-top').css('padding-right', scrollbarWidth);    
    }
})
.on('hidden.bs.modal', function () {
    $(document.body).css('padding-right', 0);
    $('.navbar-fixed-top').css('padding-right', 0);
});

function getScrollBarWidth () {
    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);
};

Voici l'exemple de travail: http://jsbin.com/oHiPIJi/64

8
Agni Pradharma

Si vous avez corrigé la barre de navigation et que vous ne voulez pas faire défiler le corps lorsque modal est ouvert, utilisez ce style

.modal-open {
    overflow: visible;
}
.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    padding-right:0px!important;
}
7
Calvin Grain

Aucun des éléments de cette page ne fonctionnait pour moi dans les versions 3.3.4 et 3.3.5 Ajouter ce CSS a résolu le problème pour moi.

body {
padding-right:0px !important;
margin-right:0px !important;
}
6
Dizzle
$('body').on('show.bs.modal', function () {
    if ($("body").innerHeight() > $(window).height()) {
        $("body").css("margin-right", "17px");
    }
}); 

$('body').on('hidden.bs.modal', function (e) {
    $("body").css("margin-right", "0px");
});

Ce petit correctif simule la barre de défilement lorsque le modal est affiché, ajoutant une marge droite au corps.

4
hect0r90

Cette solution fonctionne pour moi !!!!

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}


.modal-open[style] {
padding-right: 0px !important;
}
2
Jigar Bhatt

pour résoudre le problème provoquant le décalage de la page vers la droite

html, body{
  padding: 0 !important;
}

2
Femi-oke Anthony

html, body{
    padding-right: 0px !important; 
    position: relative!important;
}

essayez ce code vraiment ça marche

2
beast.nil

Dans mon cas, la balise body spécifie déjà overflow:hidden.

Lorsque la boîte de dialogue modale s'ouvre, elle ajoute également padding-right:17px; au corps.

Mon code ici

.modal-open {
  overflow: hidden!important;
  padding-right:0!important
}
2
KayJ

Lorsque le modal d'amorçage s'ouvre, la classe .modal-open est définie sur balise body. Dans ce dépassement de balise: masqué est défini. nous devons changer cela. Ajoutez le code ci-dessous dans votre CSS.

<style>
body.modal-open {
    overflow: visible !important;
}
</style>

Référence: - Comment réparer Bootstrap modal background en haut de page

1
Sudhanshu sharma

Depuis Bootstrap 3.3.2, le comportement semble être que les barres de défilement sont supprimées lorsque la boîte de dialogue est affichée et Bootstrap ajoute une marge de remplissage droite à l'élément body pour compenser l'espace précédemment occupé par la barre de défilement. Malheureusement, cela n’empêche pas le décalage d’écran, du moins dans les versions modernes de Chrome, IE, Firefox ou Safari. Aucune des corrections apportées ici ne résout complètement ce problème, mais la combinaison des réponses de ben.kaminski et d'une partie de la réponse de cjd82187 ne résout le problème qu'avec CSS:

/* removes inline padding added by Boostrap that makes the screen shift left */
.modal-open[style] {
    padding-right: 0px !important;
}

/* keeps Bootstrap from removing the scrollbar if it's there */
.modal-open {
    overflow: auto;
}

Comme mentionné par ben.kaminski, le code a été ajouté à Twitter Bootstrap afin que vous puissiez faire défiler l'écran pour afficher le modal s'il se situe au-delà du bas de l'écran. Pour conserver cette fonctionnalité, vous pouvez encapsuler la solution CSS dans une requête multimédia afin qu'elle ne s'applique qu'aux grandes fenêtres, à peu près comme ceci:

@media (min-width: 992px) {         
    .modal-open[style] {
        padding-right: 0px !important;
    }

    .modal-open {
        overflow: auto;
    }   
}
1
clav

Implémenté cette solution simple

.modal-open {

  padding-right: 0 !important;

}

html {

  overflow-y: scroll !important;

}
1
harshal lonare

Aucun de ce qui précède a travaillé et d'autres heures de recherche. Mais le code suivant fonctionnait parfaitement avec juste un peu de CSS. Ce qui précède n’enlèverait pas le rembourrage de style en ligne: 17px; avec JS ou jquery, je pouvais ajouter 0 padding, mais n’avait aucun effet.

.modal-open {
  padding-right: 0px !important;
  overflow-y: scroll;
  width: 100%;
  display: block;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  outline: 0;
  padding-right: 0 !important;
}
1
Corey B

Ma solution Jquery:

var nb = $('nav.navbar-fixed-top');
$('.modal')
    .on('show.bs.modal', function () {
        nb.width(nb.width());
    })
    .on('hidden.bs.modal', function () {
        nb.width(nb.width('auto'));
    });
0
Goloveichuk

La meilleure solution pour moi était d'utiliser ces paramètres. Cela fonctionne pour le web et le mobile

.modal-open {
   overflow: hidden;
   position: absolute;
   width: 100%;
   height: 100%;
}
0
Bartando

si quelqu'un utilise react-bootstrap, la solution est un peu plus complexe, car react-bootstrap applique des styles inline à l'élément body pour manipuler les styles overflow et padding. Cela signifie que vous devez remplacer ces styles en ligne par !important

body.modal-open {
  // enable below if you want to additionally allow scrolling with the modal displayed
  // overflow: auto !important;

  // prevent the additional padding from being applied
  padding: 0 !important;
}

NOTE: si vous n'activez pas le défilement (en rendant la barre de défilement visible) en supprimant la mise en commentaire du style overflow, le contenu de votre page apparaît alors décalé de la largeur de la visible qui est).

0
pjs

Pour Bootstrap version 3.2.0, ces lignes de remplissage de fichier css corrigent l'erreur:

.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
padding-right: 17px;
}

Solution trouvée ici

0
captain theo

Ma page avait besoin d'une version modifiée du code d'Agni Pradharma pour l'empêcher de changer lorsque le modal était affiché. J'ai un en-tête de navigation fixe et des pages avec défilement, d'autres sans. Démo ici: http://jsbin.com/gekenakoki/1/

J'ai utilisé les deux css:

.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

et le script:

$(document.body)
.on('show.bs.modal', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth();
    if (scrollbarWidth) {
        $(document.body).css('padding-left', scrollbarWidth); 
    }
})
.on('hidden.bs.modal', function () {
    $(document.body).css('padding-left', 0);
});

function getScrollBarWidth () {
    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);
};
0
knighter