web-dev-qa-db-fra.com

Comment masquer la barre de défilement dans Firefox?

Je viens de découvrir comment cacher la barre de défilement dans Google Chrome, je l'ai fait avec ce code: 

::-webkit-scrollbar { display: none; }

Le seul problème est que cela ne fonctionne pas sur Firefox. J'ai essayé plusieurs façons de faire, mais cela ne fonctionne toujours pas.

cssfirefox
43
Daan Kleijngeld

J'ai pu cacher la barre de défilement, mais toujours pouvoir faire défiler avec la molette de la souris avec cette solution:

html {overflow: -moz-scrollbars-none;}

Téléchargez le plugin https://github.com/brandonaaron/jquery-mousewheel et incluez cette fonction:

jQuery('html,body').bind('mousewheel', function(event) {
    event.preventDefault();
    var scrollTop = this.scrollTop;
    this.scrollTop = (scrollTop + ((event.deltaY * event.deltaFactor) * -1));
    //console.log(event.deltaY, event.deltaFactor, event.originalEvent.deltaMode, event.originalEvent.wheelDelta);
  });
19
CrazyScientist

Pour utiliser le kit Web:

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

Pour Mozilla Firefox, utilisez le code suivant:

@-moz-document url-prefix() {
    html,body{overflow: hidden !important;}
}

et si le défilement ne fonctionne pas, ajoutez 

element {overflow-y: scroll;}

à un élément spécifique

5
romal tandel

Vous pouvez utiliser la règle scrollbar-width. Vous pouvez scrollbar-width: none; pour masquer la barre de défilement dans Firefox et pouvoir toujours faire défiler librement.

body {
   scrollbar-width: none
}
5
George Flint

Ceci est en quelque sorte une solution générique:

<div class="outer">
 <div class="inner">
    Some content...
 </div>
</div>

<style>
 .outer {
 overflow: hidden;
}
 .inner {
 margin-right: -16px;
 overflow-y: scroll;
 overflow-x: hidden;
}
</style>

La barre de défilement est masquée par la div parente.

Cela nécessite que vous utilisiez overflow: caché dans le div parent.

5
Myles

Pour masquer la barre de défilement sur Chrome, Firefox et IE, vous pouvez utiliser ceci:

.hide-scrollbar
{
    overflow: auto;
    -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */
}
3
Rowin

Essayez d'utiliser ceci:

overflow-y: -moz-hidden-unscrollable;

0
peeter

Ajouter une règle css sur le corps:

body{
  overflow: hidden;
}
0
Sergio Abreu

Dans certains cas particuliers (l'élément est tout à fait à droite de l'écran ou son débordement parent est masqué), cela peut constituer une solution:

@-moz-document url-prefix() {
  .element {
    margin-right: -15px;
  }
}
0
gazdagergo