web-dev-qa-db-fra.com

Barres de défilement cachées dans Firefox (permet le défilement, mais pas de barre de défilement)

Je voudrais créer un div capable de faire défiler mais qui n'affiche pas les barres de défilement. J'ai trouvé une solution pour Webkit (ci-dessous) mais comment cela peut-il être fait dans d'autres navigateurs?

Je préfère éviter d'utiliser un plugin javascript. En espérant trouver une solution CSS ou spécifique au fournisseur.


Solution Webkit

#photoreel::-webkit-scrollbar {
    height: 0;
    width: 0;
}
#photoreel {
    overflow-x: scroll;
    overflow-y: hidden;
}
46
Matt

Vous devez envelopper votre div défilable dans une autre div avec overflow:hidden qui masque la barre de défilement.

Voir http://jsfiddle.net/qqPcb/ pour un exemple.

BTW: La même technique est utilisée par n joli petit plugin jQuery appelé jScrollPane

52
user123444555621

Solution 2019

Depuis Firefox 64, il existe une solution parfaitement simple pour cela (ne fonctionne que dans Firefox et Firefox mobile)

scrollbar-width: none;

Vérifiez le docs

Pour les arrivants du post marqué comme duplicate , c'est aussi une solution MS Edge:

-ms-overflow-style: -ms-autohiding-scrollbar;
3
Ondra

Si vous voulez dire la barre de défilement créée par Firefox (comme celle à droite de cette page), je ne pense pas que vous le puissiez. Voir ceci lien pour une meilleure explication

3
Stanley Cup Phil