it-swarm.com.de

Bildlaufleiste im Firefox ausblenden

Ich möchte eine Bildlaufleiste auf einer Seite ausblenden, aber ich kann wie eine Bildlaufleiste blättern. Ich kann also nicht Überlauf verwenden: ausgeblendet, weil ich möchte, dass ich wie normale Bildlauf ausführen kann, aber kein Bild sehen kann Scrollleiste.

also verwende ich diesen CSS-Code (Klasse not-scroll-body ist eine Klasse von body-Tags)

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

Es funktioniert in Chrome , aber wenn ich -moz- anstelle von -webkit- so benutze

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

Es funktioniert nicht in Firefox.

Was kann ich tun, damit es funktioniert?

Vielen Dank für jede Antwort und Entschuldigung für meine schlechte englische Sprache :)

11
Mei

Laut diese Antwort und allem, was ich im Internet finden konnte, gibt es kein Firefox-Äquivalent des -webkit-scrollbar-Selektors. Anscheinend gab es war früher eine Eigenschaft, -moz-scrollbars-none, die Sie dafür verwenden könnten, aber seitdem wurde es entfernt und Personen empfohlen mit overflow:hidden oder einer hackish margin-right: -14px-Lösung.

Tut mir leid, dass ich nicht hilfsbereiter sein kann - es scheint, als ob es auf Firefox keine elegante Möglichkeit gibt.

9

Ich konnte die Bildlaufleiste ausblenden, aber mit dieser Maus 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);
  });
6
CrazyScientist

In firefox 64 , wenn Sie den Scroll ausblenden möchten, wenn Sie overflow:auto haben, können Sie scrollbar-width: none; jetzt ausführen! Woop woop! Hier sind die relevanten Dokumente (Browser-Unterstützung wird am Ende der Seite angezeigt).

Nachfolgend finden Sie eine einfache css-only-Lösung , die Ihre vertikale und horizontale Bildlaufleiste in Firefox (getestet in v64 & firefox dev edition v65.0b8) versteckt. Hinweis : vertikales und horizontales Scrollen mit dem blauen div}.

.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

So mache ich es, nur CSS und funktioniert gut mit Frameworks wie Bootstrap. Es braucht nur 2 extra div:

Sie können den Text auswählen, um ihn zu scrollen oder mit den Fingern zu scrollen, wenn Sie über einen Touchscreen verfügen.

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

Kurzversion für faule Leute:

.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

Ich gehe davon aus, dass Sie die Bildlaufleiste lokal ausblenden möchten. Damit meine ich, nicht auf einem Webserver für die Welt zu sehen, sondern auf Ihrer lokalen Firefox-Kopie, nur für Ihr "Sehvergnügen".

dies ist, was ich für opensuse/kde gefunden habe: in userChrome.css;

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

verwenden Sie -14px, um den vertikalen Bildlauf vollständig auszublenden (mehr, wenn Ihr Systemdesign eine breitere Bildlaufeinstellung hat). Ich verwende weniger (10px), um nur ein wenig davon zu sehen, sodass ich mit der mittleren Maustaste zu einem Ort auf der Seite springen kann.

was ich getan habe, aber nicht mehr immer funktioniert: in userContent.css

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

-oder-

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

oben funktionierte früher, aber ich habe jetzt den Mausrad-Bildlauf verloren. Jetzt funktionieren nur die Pfeiltasten der Tastatur.

Ich hoffe, ich habe verstanden, was du willst, und das hilft. Landis.

0
Landis Reed

Möglicherweise können Sie overflow: -moz-hidden-unscrollable verwenden. - Dies funktionierte perfekt für meine Anforderungen, da ich bereits dragscroll.js verwendet habe.

0
Jon Maloto