Wie verstecke ich die Bildlaufleiste in Firefox?

Ich habe gerade herausgefunden, wie man die Bildlaufleiste in Google Chrome ausblendet. Ich habe es mit diesem Code gemacht:

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

Das einzige Problem ist, dass dies unter Firefox nicht funktioniert. Ich habe viele Möglichkeiten ausprobiert, aber es funktioniert immer noch nicht.

Sie können die scrollbar-widthRegel verwenden. Sie können scrollbar-width: none;die Bildlaufleiste in Firefox ausblenden und trotzdem frei scrollen.

body {
   scrollbar-width: none;
}

Um die Bildlaufleiste in Chrome, Firefox und IE auszublenden, können Sie Folgendes verwenden:

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

Ich konnte die Bildlaufleiste ausblenden, aber mit dieser Lösung immer noch mit dem Mausrad scrollen:

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

Laden Sie das Plugin https://github.com/brandonaaron/jquery-mousewheel herunter und fügen Sie diese Funktion hinzu:

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);
  });

Dies ist, was ich brauchte, um Bildlaufleisten zu deaktivieren, während der Bildlauf in Firefox, Chrome und Edge in beibehalten wurde:

          @-moz-document url-prefix() { /* Disable scrollbar Firefox */
            html{
              scrollbar-width: none;
            }
          }
          body {
            margin: 0; /* remove default margin */
            scrollbar-width: none; /* Also needed to disable scrollbar Firefox */
            -ms-overflow-style: none;  /* Disable scrollbar IE 10+ */
            overflow-y: scroll;
          }
          body::-webkit-scrollbar {
            width: 0px;
            background: transparent; /* Disable scrollbar Chrome/Safari/Webkit */
          }

Verwenden Sie für das Webkit Folgendes:

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

Verwenden Sie für Mozilla Firefox den folgenden Code:

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

und wenn das Scrollen nicht funktioniert, fügen Sie hinzu

element {overflow-y: scroll;}

zu einem bestimmten Element

Dies ist so etwas wie eine generische Lösung:

<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>

Die Bildlaufleiste wird vom übergeordneten Div ausgeblendet.

Dies erfordert die Verwendung von overflow: versteckt im übergeordneten div.

Für eine neuere Version von Firefox funktionieren die alten Lösungen nicht mehr, aber ich habe in Version 66.0.3 erfolgreich die scrollbar-colorEigenschaft verwendet, die Sie festlegen können transparent transparentund die die Bildlaufleiste in Firefox auf dem Desktop zumindest unsichtbar macht (findet immer noch in statt) Das Ansichtsfenster und auf Mobilgeräten funktioniert nicht, aber dort ist die Bildlaufleiste eine feine Linie, die rechts über dem Inhalt platziert wird.

overflow-y: auto; //or hidden if you don't want horizontal scrolling
overflow-y: auto;
scrollbar-color: transparent transparent;

Ich habe das benutzt und es hat funktioniert. https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

html {
scrollbar-width: none;
}

Hinweis: Benutzeragenten müssen alle im Stammelement festgelegten Werte für die Breite der Bildlaufleistenbreite auf das Ansichtsfenster anwenden.

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

In Firefox funktioniert dies nicht, da Firefox die Unterstützung für versteckte Bildlaufleisten mit Funktionen aufgegeben hat (die Sie overflow: -moz-scrollbars-none;in alten Versionen verwenden können).

Versuchen Sie Folgendes:

overflow-y: -moz-hidden-unscrollable;

In bestimmten Fällen (das Element befindet sich ganz rechts auf dem Bildschirm oder der übergeordnete Überlauf ist ausgeblendet) kann dies eine Lösung sein:

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

Ich habe alles versucht und was für meine Lösung am besten funktioniert hat, war, immer die vertikale Bildlaufleiste anzuzeigen und dann einen negativen Rand hinzuzufügen, um sie auszublenden.

Dies funktionierte für IE11, FF60.9 und Chrome 80

body {
  -ms-overflow-style: none; /** IE11 */
  overflow-y: scroll;
  overflow-x: hidden;
  margin-right: -20px;
}

Nur für den Fall, dass jemand nach einem Hack sucht, um die Bildlaufleiste in Firefox (79.0) unsichtbar zu machen.

Hier ist eine Lösung, die erfolgreich für Chrome, IE und Safari funktioniert und die Bildlaufleiste in Firefox transparent macht. Keiner der oben genannten Punkte hat für Firefox (79.0) dazu beigetragen, die Bildlaufleiste wirklich auszublenden.

Wenn jemand einen Weg findet, dies zu tun, ohne die Farbe zu ändern, ist dies sehr hilfreich. Bitte Kommentar unten.

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

.scrollhost ::-moz-scrollbar {
  display: none;
 
}
 
.scrollhost {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-color: transparent transparent; /*just hides the scrollbar for firefox */
}

Ich habe es für mich in ReactJS zum Laufen gebracht, create-react-appindem ich Folgendes in mein App.css:

@-moz-document url-prefix() {
  html,
  body {
    scrollbar-width: none;
  }
}

Auch das bodyElement hatoverflow: auto