Suppression des barres de défilement HTML mais autorisation du défilement par la molette de la souris

Question

Duplicata possible :
Comment désactiver la barre de défilement d'un navigateur ou d'un élément, mais autoriser le défilement avec la molette ou les touches fléchées ?

J'ai réussi à désactiver les barres de défilement verticales dans une grille en définissant la propriété CSS suivante overflow-y: hidden . Cependant, cela a également supprimé la possibilité de faire défiler le contenu avec la molette de la souris.

Existe-t-il un moyen de ne pas afficher les barres de défilement tout en permettant de faire défiler le contenu à l'aide de la molette de la souris ou des touches fléchées ?

Answer 1

Il existe des méthodes Javascript, voir le fil de discussion que vous avez dupliqué.

Une meilleure solution consiste à définir la div cible avec overflow:scroll, et à l'insérer dans un deuxième élément plus étroit de 8px, avec overflow:hidden.

L'élément cible aura une barre de défilement cachée. La molette de la souris fonctionnera, mais la barre de défilement ne s'affichera pas.

<div style='overflow:hidden; width:200px;'>
   <div style='overflow:scroll; width:208px'>
      My mousewheel scrollable content here....
   </div>
</div>

Notez que 8px comme largeur de la barre de défilement est un nombre aléatoire - c'est probablement beaucoup plus, et cela pourrait nécessiter un CSS par navigateur.

Toujours mieux que JS dans mon livre.

Answer 2

Vous pourriez utiliser jScrollPane qui vous permet de remplacer les barres de défilement du navigateur par des barres personnalisées :

Puisque vous pouvez styliser ces barres de défilement personnalisées à l'aide de CSS, vous pouvez facilement les faire disparaître (essayez quelque chose comme : .jScrollPaneTrack { display: none; } )