Comment masquer la barre de défilement tout en conservant la fonctionnalité de défilement ?

Masquer la barre de défilement tout en conservant la capacité de défilement

Malgré la désactivation de la barre de défilement à l'aide de overflow : masqué, la fonctionnalité de défilement a été perdue. Pour résoudre ce problème, il existe une solution alternative qui combine un wrapper CSS avec des calculs JavaScript.

Solution JavaScript et CSS

Utilisez le code CSS et JavaScript suivant :

#wrapper {
  overflow: hidden;
}

// Calculate the width of the element excluding the scrollbar
var elementWidth = document.getElementById("element").scrollWidth;

// Set the wrapper width to match the element width
document.getElementById("wrapper").style.width = elementWidth + "px";

En masquant la barre de défilement avec CSS et en ajustant la largeur du wrapper pour qu'elle corresponde à la largeur réelle du contenu, vous pouvez conserver le défilement fonctionnalité via la souris ou le clavier.

Technique supplémentaire

Pour créer un div défilant sans barre de défilement visible, utilisez le même principe. Ajoutez simplement le overflow-y: scroll; propriété à l'élément interne.

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!