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!