Comment désactiver la barre de défilement du corps sans la masquer ?

Désactivation de la barre de défilement HTML/corps tout en préservant la visibilité

Pour une expérience Lightbox optimale, on peut souhaiter désactiver temporairement la barre de défilement de l'élément parent sans la masquer il. Pour y parvenir, envisagez l'approche suivante :

Corriger l'élément parent :

Lors de l'ouverture de la lightbox, attribuez les propriétés CSS suivantes à la page sous-jacente à la superposition :

body {
  position: fixed;
  overflow-y: scroll;
}

Cela corrige la position de la page et limite le défilement vertical à la page elle-même, tout en conservant la barre de défilement. visibilité.

Réinitialiser à la fermeture de la Lightbox :

Lors de la fermeture de la lightbox, restaurez les propriétés CSS d'origine :

body {
  position: static;
  overflow-y: auto;
}

Gestion des propriétés existantes Défilement :

Pour conserver la position de défilement actuelle de la page, utilisez JavaScript pour obtenir la valeur scrollTop du document avant d'ouvrir la lightbox et attribuez-la comme propriété supérieure de l'élément body :

.noscroll {
  position: fixed;
  top: var(--st, 0);
  inline-size: 100%;
  overflow-y: scroll;
}

const b = document.body;
b.style.setProperty('--st', -(document.documentElement.scrollTop) + "px");
b.classList.add('noscroll');

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!