twitter bootstrap 3 questions de défilement modal sur mobile

Je suis actuellement en utilisant twitter bootstrap 3 modal sur mobile. Il fonctionne parfaitement bien sur le bureau, mais sur mobile chaque fois que je le défilement elle a également fait défiler la fenêtre derrière le modal. Comment puis-je éviter cela?

source d'informationauteur adit | 2014-01-09

twitter-bootstrap twitter-bootstrap-3

POUR BOOTSTRAP 3

J'ai trouvé un correctif pour ce problème qui semble être assez bonne pour mon site.

CSS:

body.modal-open > .wrap {
  overflow: hidden;
  height: 100%;
}

.modal-content, 
.modal-dialog, 
.modal-body { 
  height: inherit; 
  min-height: 100%; 
}

.modal { 
  min-height: 100%; 
}

HTML:

<body>
  <div class="wrap">All non-modal content</div>
  <div class="modal"></div>
</body>

Ainsi, dans le cas d'un modal est ouvert, tous les non-modale, le contenu est limité à la hauteur de la fenêtre d'affichage et le trop-plein est caché, ce qui empêche le principal site de défilement, tandis que le modal peut encore faire défiler.

MODIFIER: Ce correctif a des problèmes dans Firefox.

Correctif pour mon site a été (FF seulement une media query):

@-moz-document url-prefix() {
  .modal-body { height: auto; min-height: 100%; }
  .modal { height: auto; min-height: 100%; }
  .modal-dialog {
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
  }

  .modal-content {
    height: auto;
    min-height: 100%;
    border-radius: 0;
    border: 0px solid #000;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
  }

}

3

J'ai remarqué qu'il ne fait défiler la page d'arrière-plan lorsque modale des votre de défilement et de vous frapper le fond de l'modal, alors si vous essayez de garder le défilement vers le bas, il fait défiler la page d'arrière-plan. Regardez sur le côté droit de débordement de la barre, il est à peine visible lorsque le modal est ouvert (sur Chrome Android)

Semble que l'effet est de faire défiler le modal dans la mesure du modal, puis faire défiler automatiquement l'arrière-plan de page, même si le modal est toujours ouverte.
3

Assez intéressant, ils traiter de cette question dans les docs sans offrir beaucoup de la manière de la solution:

"Soutien pour un overflow: hidden sur le <body> élément est assez limité dans iOS et Android. À cette fin, lorsque vous faites défiler passé le haut ou le bas d'un modal dans l'un de ces dispositifs de navigateurs, le <body> contenu commencera à défiler."

http://getbootstrap.com/getting-started/#overflow-and-scrolling
3

Oui c'était super gênant quand je suis tombé sur ce problème sur mon iphone 6s aujourd'hui.

Cela semble encore être un problème, même avec la dernière bootstrap (3.3.6 à mon moment).

CSS Quickfix Solution:
```
body.modal-open { position: fixed; }
```
"Note ce côté-effet de "défilement" en haut de la page alors que le modal est ouvert."

Voir plus de détails sur cette solution ici

Javascript/jQuery Solution:

Une meilleure solution serait d'utiliser bootstrap modale dans les événements. Cette solution intègre la quickfix méthode, mais corrige le "haut de page" problème.
Vous pouvez ensuite modifier le css en tant que de besoin en fonction de l'événement.

Dans mon code ci-dessous, j'ai mis la position actuelle de la fenêtre sur l'événement show.bs.modal (cette valeur est utilisée pour corriger le "quickfix" problème).

Je puis appliquer le css solution rapide sur la shown.bs.modal événement. En d'autres termes, après la modale s'affiche.

Enfin, lorsque le modal est fermé, je passe de la position de l'organe de rapport (peut être réglé à l'électricité statique ainsi, je crois) et faites défiler la fenêtre jusqu'à sa position initiale.
```
//set current position
var cPosition = false;

$('.modal').on('show.bs.modal', function(){

    cPosition = $(window).scrollTop();
})
.on('shown.bs.modal', function(){

    $('body').css({
        position:'fixed'
    });

})
.on('hide.bs.modal', function(){

    $('body').css({
        position:'relative'
    });

    window.scrollTo(0, cPosition);

});    
```
Devrait être relativement simple à mettre en place pour n'importe qui avec un peu de javascript expérience.

J'espère qu'ils vont résoudre ce problème dans le bootstrap 4, mais d'ici là, espérons que cette réponse aide d'autres personnes avec des problèmes similaires.
0

Hey les gars je crois que j'ai trouvé un fix pour Bootstrap 3. Cela fonctionne pour moi sur iphone et android pour le moment. Ses un mash up des heures et des heures de recherche, de lecture et de test. Donc, si vous voyez des parties de votre code ici le crédit va à vous lol.
```
@media only screen and (max-device-width:768px){

body.modal-open {
//block scroll for mobile;
//causes underlying page to jump to top;
//prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
}

body.viewport-lg {
//block scroll for desktop;
//will not jump to top;
//will not prevent scroll on mobile
position: absolute; 
}

body {  
overflow-x: hidden;
overflow-y: scroll !important;
}
```
La raison pour laquelle les médias est sur qu'il est sur un pc de bureau j'ai eu des problèmes avec lors de la modal serait ouvert à tous les contenus sur la page passage d'centré à gauche. Regardé comme de la merde. Donc c'cibles jusqu'à la tablette de la taille des appareils où vous auriez besoin de les faire défiler. Il y a toujours un léger décalage sur mobile et tablette, mais c'est vraiment pas beaucoup. Laissez-moi savoir si cela fonctionne pour vous les gars. J'espère que cela met le clou dans le cercueil

Pour Bootstrap 3

J'ai trouvé une solution pour les appareils mobiles (écran tactile) avec iscroll.js

dans le contenu de la modale d'ajouter:

 <div id="smartScroll"> Content of the modal </div>

À initialiser .js

var myScroll = new IScroll('#smartScroll', {
   mouseWheel: true,
   scrollbars: true,
   click: true
});

Vous devez vous connecter pour publier un commentaire.