Empêcher le défilement de la page lorsqu'un modal est ouvert

Empêcher le défilement de la page lorsque la boîte modale est ouverte

Avez-vous déjà rencontré cette situation: ouvrez une boîte modale, faites défiler, fermez-la et la page saute vers un autre endroit?

En effet, la boîte modale n'est qu'un élément de la page, elle peut rester en place, mais le reste de la page fonctionne toujours correctement.

Parfois, cela n'a pas d'importance, comme lorsque la hauteur de l'écran est exactement égale à la hauteur de la fenêtre. Mais dans d'autres cas, un problème de défilement se produit. La bonne nouvelle est que nous pouvons empêcher cela avec certaines astuces CSS (et JavaScript).

Commencez par une solution simple

Nous pouvons réduire considérablement le problème du défilement de la page lorsque la boîte modale est ouverte en définissant la hauteur de tout le corps à la hauteur complète de la fenêtre et en cachant un débordement vertical lorsque la boîte modale est ouverte:

 <code>body.modal-open { height: 100vh; overflow-y: hidden; }</code>

C'est bien, mais si nous avons fait défiler les éléments de la page avant d'ouvrir la boîte modale, il y aura un léger réarrangement horizontal. La largeur de la fenêtre augmente d'environ 15 pixels, ce qui est exactement la largeur de la barre de défilement. Ajustez un peu le bon remplissage du corps pour éviter cela.

 <code>body { height: 100vh; overflow-y: hidden; padding-right: 15px; /* 避免宽度重排*/ }</code>

Notez que la hauteur de la boîte modale doit être inférieure à la hauteur de la fenêtre pour que cette méthode fonctionne. Sinon, la barre de défilement sur le corps sera nécessaire.

Que faire sur mobile?

Cette solution fonctionne bien sur le bureau et le mobile Android. Cependant, iOS Safari a besoin de plus de traitement car le corps fait toujours défiler lorsque la boîte modale s'ouvre en cliquant et en se déplaçant sur l'écran tactile.

Nous pouvons régler le corps sur le positionnement fixe comme une solution:

 <code>body { position: fixed; }</code>

C'est bon maintenant! Lorsque vous touchez l'écran, le corps ne répondra pas. Cependant, il y a encore un "petit" problème ici. En supposant que le déclencheur de la boîte modale est en bas de la page, nous cliquons pour l'ouvrir. très bien! Mais maintenant, nous faisons défiler automatiquement le haut de l'écran, ce qui est aussi déroutant que le comportement de défilement que nous essayons de résoudre.

Oups!

Nous devons donc utiliser JavaScript

Nous pouvons utiliser JavaScript pour éviter la bulle des événements tactiles. Nous savons tous qu'il devrait y avoir un calque d'arrière-plan lorsque la boîte modale est ouverte. Malheureusement, dans iOS, StopPropagation est un peu gênant à travailler avec des événements tactiles. Mais la prévention fonctionne très bien. Cela signifie que nous devons ajouter des écouteurs d'événements à chaque nœud DOM inclus dans la boîte modale - non seulement sur l'arrière-plan ou la couche de boîte modale. La bonne nouvelle est que de nombreuses bibliothèques JavaScript peuvent le faire, y compris la JQuery éprouvée.

Encore une chose: que se passe-t-il si nous devons faire défiler à l'intérieur de la boîte modale? Nous devons toujours déclencher la réponse à l'événement tactile, mais nous devons toujours arrêter le bouillonnement lorsqu'il atteint le haut ou le bas de la boîte modale. Cela semble très compliqué, donc nous n'avons pas complètement résolu le problème.

Méthode du corps fixe amélioré

Ce que nous utilisons est:

 <code>body { position: fixed; }</code>

Si nous connaissons la position supérieure de défilement et l'ajoutant à notre CSS, le corps ne fait pas défiler en haut de l'écran, donc le problème est résolu. Nous pouvons utiliser JavaScript pour calculer le dessus de défilement et ajouter cette valeur au style corporel:

 // Lorsque la boîte modale s'affiche, nous avons besoin d'un corps fixe
document.body.style.position = 'fixe';
document.body.style.top = `- $ {window.scrolly} px`;

// Lorsque la boîte modale est masquée, nous devons le garder en haut de la position de défilement document.body.style.position = '';
document.body.style.top = '';

Cela fonctionne, mais il y a encore une petite fuite après la fermeture de la boîte modale. Plus précisément, lorsque la boîte modale est ouverte et que le corps est réglé sur fixe, la page semble avoir perdu sa position de défilement. Nous devons donc récupérer l'emplacement. Modifions notre JavaScript pour résoudre ce problème.

 // Lorsque la boîte modale est cachée ...
const Scrolly = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollto (0, parseInt (Scrolly || '0') * -1);

j'y suis arrivé! Le corps ne fait plus défiler lorsque la boîte modale est ouverte et reste en position de défilement lorsque la boîte modale est ouverte et fermée. Vive!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!