Comment puis-je désactiver le défilement tout en gardant la barre de défilement visible ?

Préserver la visibilité de la barre de défilement tout en désactivant le défilement

Bien qu'il soit possible de masquer les barres de défilement à l'aide de overflow: Hidden, cette approche peut créer des changements visuels sur votre site Web . Si vous souhaitez désactiver le défilement sans compromettre la visibilité, voici comment :

Corriger la position de la page :

Si la page sous la superposition peut être corrigée en haut, appliquez l'option suivant le CSS lors de l'ouverture de la superposition :

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

Cela conservera la visibilité de la barre de défilement mais empêchera le défilement du contenu. Pour restaurer le défilement à la fermeture de la superposition, utilisez ce CSS :

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

Préserver la position du défilement :

Si la page a préalablement défilé, obtenez document.documentElement.scrollTop en utilisant JavaScript. Attribuez dynamiquement cette valeur comme propriété supérieure de l’élément body. Cela maintiendra la position de défilement actuelle pendant toute la durée de la superposition.

CSS :

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

JS :

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!