Comment puis-je empêcher le défilement de la barre de défilement sans masquer la barre de défilement ?

Empêcher le défilement de la barre de défilement sans se cacher

Un défi courant lors de la mise en œuvre des lightbox est la nécessité de désactiver temporairement la barre de défilement sur la page parent sans recourir à débordement : caché ;. Cette solution peut provoquer des sauts indésirables et une occupation de l'espace.

Heureusement, il existe une approche viable pour désactiver les barres de défilement tout en les affichant. En utilisant un positionnement fixe pour les éléments sous la superposition, il est possible d'obtenir cet effet. Lorsque la superposition est activée, appliquez les styles suivants au corps :

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

Cela affichera la barre de défilement mais désactivera sa fonctionnalité. Pour annuler cette modification à la fermeture de la superposition, restaurez simplement les styles d'origine :

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

Dans les cas où la page a déjà défilé, capturer la position de défilement actuelle via JavaScript et la définir comme propriété supérieure du L'élément body garantit que la page reste dans sa position de défilement actuelle lorsque la superposition est activée. Ceci peut être réalisé avec les CSS et JS suivants :

.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');

En implémentant cette approche, vous pouvez désactiver efficacement les barres de défilement sans les masquer, en conservant la fonctionnalité souhaitée pour la lightbox et la page parent.

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!