web-dev-qa-db-fra.com

Supprimer la barre de défilement HTML mais autoriser le défilement de la molette de la souris

Duplicata possible:
Comment désactiver le navigateur ou la barre de défilement des éléments, mais autoriser le défilement avec les touches de la molette ou de la flèche?

J'ai pu désactiver les barres de défilement verticales dans une grille en définissant la propriété CSS 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 autorisant le défilement du contenu à l'aide de la molette de la souris ou des touches fléchées?

htmlscrollmousewheel
43
Sameer

Il existe des méthodes Javascript, voyez le fil que vous avez dupliqué.

Une meilleure solution consiste à définir la div cible sur overflow: scroll et à l'envelopper dans un deuxième élément 8px plus étroit, qui est overflow: hidden.

L'élément cible aura une barre de défilement cachée. La molette 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 par CSS de navigateur.

Encore mieux que JS dans mon livre.

62
SamGoody

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

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

1
vitch