Comment puis-je désactiver les barres de défilement sans les masquer dans le développement Web ?

Désactiver les barres de défilement sans les masquer

En développement Web, il est parfois nécessaire de désactiver les barres de défilement sur un élément parent lors de l'utilisation d'une lightbox. Cependant, masquer simplement les barres de défilement à l'aide de overflow: Hidden est souvent indésirable, car cela peut faire sauter le site et occuper l'espace où se trouvait la barre de défilement.

Il existe une solution viable qui permet de désactiver les barres de défilement tout en continuant à afficher. eux. Si la page sous la lightbox peut être positionnée en haut, vous pouvez utiliser le code CSS suivant :

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

Cela affichera la barre de défilement mais empêchera le défilement du contenu. Pour restaurer les barres de défilement après la fermeture de la lightbox, rétablissez simplement ces propriétés :

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

Cette approche ne nécessite aucune modification des événements de défilement.

Adressage des positions de défilement préexistantes

Si la page défile déjà avant l'ouverture de la lightbox, vous pouvez récupérer la position de défilement actuelle via JavaScript et l'attribuer comme propriété supérieure de l’élément corps. Cela maintiendra la position de défilement actuelle pendant l'utilisation de la lightbox.

CSS

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

JavaScript

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

Par En mettant en œuvre cette solution, vous pouvez désactiver efficacement les barres de défilement sans les masquer, préservant ainsi la présentation visuelle prévue de votre page Web.

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!