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 la fonctionnalité de défilement via la souris ou un 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.