web-dev-qa-db-fra.com

Masquer la barre de défilement dans Firefox

Je souhaite masquer une barre de défilement dans la page, mais je peux faire défiler comme il contient une barre de défilement. . barre de défilement.

donc j'utilise ce code css (la classe not-scroll-body est une classe de balise body)

.not-scroll-body::-webkit-scrollbar {
    display: none; 
}

Cela fonctionne sous Chrome , mais quand j'utilise -moz- au lieu de -webkit- comme ceci

.not-scroll-body::-moz-scrollbar {
    display: none; 
}

Cela ne fonctionne pas dans Firefox.

Que puis-je faire pour que cela fonctionne?

Merci pour chaque réponse et désolé pour ma mauvaise langue anglaise :)

htmlcssfirefoxscrollbarhide
11
Mei

Selon cette réponse et tout ce que j'ai pu trouver sur le Web, il n'existe pas d'équivalent Firefox du sélecteur -webkit-scrollbar. Apparemment, il y avait auparavant une propriété, -moz-scrollbars-none, que vous pourriez utiliser pour cela, mais elle a depuis été supprimée et les personnes recommend utilisant overflow:hidden ou une solution hackish margin-right: -14px.

Désolé, je ne peux pas être plus utile - il semble qu'il n'y ait pas de moyen Firefox de le faire avec élégance.

9
Christian Ternus

J'ai pu masquer la barre de défilement, mais toujours pouvoir faire défiler avec 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);
  });
6
CrazyScientist

Dans firefox 64 , si vous voulez masquer le défilement lorsque vous avez overflow:auto, vous pouvez maintenant faire scrollbar-width: none;! Woop woop! Voici les documents pertinents (le support du navigateur est affiché en bas de page).

Vous trouverez ci-dessous une solution simple css qui masquera votre barre de défilement verticale et horizontale dans firefox (testé en v64 et firefox dev edition v65.0b8). Astuce : essayez le défilement vertical et horizontal sur le div bleu.

.not-scroll-body {
  overflow: auto;
  height: 200px;
  width: 90%;
  background: linear-gradient(to bottom, cyan, blue);
  white-space: no-wrap;

  /* the line that rules them all */
  scrollbar-width: none;
  /* */
}

span {
  width: 200%;
  height: 400%;
  background: linear-gradient(to left, green, yellow);
  display: inline-block;
  margin: 5rem;
}
<div class="not-scroll-body"><span></span></div>

2
protoEvangelion

cf: https://stackoverflow.com/a/41021131/4881677

C’est comme ça que je le fais, uniquement en CSS et fonctionne bien avec des frameworks comme bootstrap. Il ne nécessite que 2 div supplémentaires:

Vous pouvez sélectionner le texte pour le faire défiler ou le faire défiler avec les doigts si vous avez un écran tactile.

.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
  overflow-x:hidden;
  margin-bottom:-17px;
  overflow-y:hidden;
  width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x:auto;
  width:100%;
  padding-bottom:17px;
  white-space: nowrap; 
  cursor:pointer
}

/* the following classes are only here to make the example looks nicer */
.row {width:100%}
.col-xs-4 {width:33%;float:left}
.col-xs-3 {width:25%;float:left}
.bg-gray{background-color:#DDDDDD}
.bg-orange{background-color:#FF9966}
.bg-blue{background-color:#6699FF}
.bg-orange-light{background-color:#FFAA88}
.bg-blue-light{background-color:#88AAFF}
<html><body>
  <div class="row">
    <div class="col-xs-4 bg-orange">Column 1</div>
    <div class="col-xs-3 bg-gray">Column 2</div>
    <div class="col-xs-4 bg-blue">Column 3</div>
  </div>
  <div class="row">
    <div class="col-xs-4 bg-orange-light">Content 1</div>
    <div class="col-xs-3 overflow-x-scroll-no-scrollbar">
      <div>
        <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
      </div>
    </div>
    <div class="col-xs-4 bg-blue-light">Content 3</div>
  </div>
</body></html>

Version courte pour les paresseux:

.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
  overflow-x:hidden;
  margin-bottom:-17px;
  overflow-y:hidden;
  width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x:auto;
  width:100%;
  padding-bottom:17px;
  white-space: nowrap; 
  cursor:pointer
}

/* the following classes are only here to make the example looks nicer */
.parent-style {width:100px;background-color:#FF9966}
<div class="parent-style overflow-x-scroll-no-scrollbar">
  <div>
    <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
  </div>
</div>

1
Jean

Je suppose que vous voulez masquer la barre de défilement localement. En cela, je veux dire, pas sur un serveur Web, mais sur votre copie locale de Firefox, pour votre plus grand plaisir.

c'est ce que j'ai trouvé pour travailler sur opensuse/kde: dans userChrome.css;

#content browser {
margin-right -12px !important;
overflow-x:hidden;
overflow-y:scroll;
}

utilisez -14px pour masquer complètement le défilement vertical (plus si le thème de votre système a un paramètre de défilement plus large). J'utilise moins (10px) pour voir juste un peu de cela afin que je puisse faire un clic du milieu pour aller à un endroit de la page.

ce que j’ai fait, mais je ne travaille pas toujours plus longtemps: dans userContent.css

#content browser {
overflow:-moz-scrollbars-none;
}

-ou-

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

ci-dessus fonctionnait, mais j’ai perdu le défilement de la molette de la souris. Seules les touches fléchées du clavier fonctionnent maintenant.

J'espère que j'ai compris ce que vous voulez et que cela aide. Landis.

0
Landis Reed

Vous pourriez peut-être utiliser overflow: -moz-hidden-unscrollable - cela a parfaitement fonctionné pour mes besoins, en partie parce que j'utilisais déjà dragscroll.js .

0
Jon Maloto