web-dev-qa-db-fra.com

Défilement de fond BootStrap Modal sur iOS

Donc, il y a ce problème connu avec modal sur iOS, lorsque le modal est activé, le balayage haut/bas fera défiler le corps au lieu du modal.

Utiliser bootstrap 3.3.7

Essayé de google, la plupart suggéré d'ajouter

body.modal-open {
  overflow: hidden !important;
}

mais ça ne marche pas.

Certains ont suggéré,

body.modal-open {
  position: fixed;
}

Mais le fond sautera au haut de la page.

Donc pour l'instant j'utilise,

body.modal-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}
#exampleModal {
  background: black;
}

En tant que contournement, le saut ne peut pas être vu (mais reste perceptible)

Y a-t-il d'autres solutions à cela?

Ceci est le site sur lequel je travaille http://www.einproductions.com/

ioscsstwitter-bootstrap
6
juniortan

se référer à Le débordement: masqué appliqué à <body> fonctionne-t-il sur iPhone Safari?

Ajout de .freezePage au HTML et au corps lorsque modal est affiché

$('.modal').on('shown.bs.modal', function (e) {
  $('html').addClass('freezePage'); 
  $('body').addClass('freezePage');
});
$('.modal').on('hidden.bs.modal', function (e) {
  $('html').removeClass('freezePage');
  $('body').removeClass('freezePage');
});

le CSS

.freezePage{
  overflow: hidden;
  height: 100%;
  position: relative;
}
5
Aditya Prasanthi

J'ai pris les solutions de @Aditya Prasanthi et de @JIm, car l'une corrige le défilement en arrière-plan et l'autre, le saut en haut après la fermeture du modal, et les a converties en un script JS minimal:

let previousScrollY = 0;

$(document).on('show.bs.modal', () => {
    previousScrollY = window.scrollY;
    $('html').addClass('modal-open').css({
        marginTop: -previousScrollY,
        overflow: 'hidden',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        position: 'fixed',
    });
}).on('hidden.bs.modal', () => {
    $('html').removeClass('modal-open').css({
        marginTop: 0,
        overflow: 'visible',
        left: 'auto',
        right: 'auto',
        top: 'auto',
        bottom: 'auto',
        position: 'static',
    });
    window.scrollTo(0, previousScrollY);
});

Il est bien sûr possible et même conseillé d’utiliser une classe pour définir et désactiver le code CSS du corps, cependant, j’ai choisi cette solution pour résoudre un problème au même endroit (et ne nécessite pas de code CSS externe également).

7
Klaas van der Weij

Ma solution:

scrollPos = window.scrollY  - get current scroll position.

body { position: fixed;
   margin-top: -**scrollPos** px);

}

Alors modal est fermé:

body {position: "";
  margin-top: "";

}

et retourne la position de défilement au point avant la fenêtre modale ouverte:

window.scrollTo(0, scrollPos);
1
JIm

Aucune des réponses ci-dessus n'a fonctionné pour moi, le modal continuant de disparaître et j'ai fini par adopter une approche de force brute qui est laide et inefficace mais qui fonctionne! 

$('body').on('touchstart touchmove touchend', e => {
    let scrollDisabled=$('.scroll-disable');
    if (scrollDisabled.length > 0 &&  scrollDisabled.has($(e.target)).length===0) {
        e.preventDefault(); 
        e.stopPropagation();
    }
});
setInterval(() => $('.modal:visible').css('top', '20px'), 100);

$(document).on({
    'show.bs.modal': e => $(e.target).addClass('scroll-disable'),
    'hidden.bs.modal': e => $(e.target).removeClass('scroll-disable')
}, '.modal');
0
kofifus