Ausblenden der scrollbar im firefox

Ich ausblenden möchten eine scroll-Leiste in der Seite, aber ich kann scrollen, wie es verfügt über eine Bildlaufleiste.
so kann ich nicht verwenden overflow:hidden, weil ich will, dass ich Blättern kann, wie die normalen
kann aber nicht sehen, eine scroll-Leiste.

also ich benutze diese css-code (Klasse-nicht-scroll-Körper ist eine Klasse für body-tag)

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

Es funktioniert in Chrome , aber wenn ich -moz- statt -webkit- wie diese

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

Es funktioniert nicht in Firefox.

Was kann ich tun, damit es funktioniert?

Danke für jede Antwort und sorry für meine schlechte englischen Sprache 🙂

Warum nicht einfach beide?
Auch, willkommen auf StackOverflow, und Ihr Englisch ist in Ordnung 🙂
Eigentlich verwende ich beide in meinem code, aber Es funktioniert nur mit Chrome , nicht mit firefox :')
Vielleicht könnten Sie etwas tun, wie dieser...

InformationsquelleAutor Mei | 2013-10-25

9

Laut diese Antwort und alles, was ich in der Lage gewesen, zu finden auf der web, es gibt keine Firefox-entspricht der -webkit-scrollbar - Selektor. Anscheinend gibt es verwendet werden eine Eigenschaft, die -moz-scrollbars-none, die auch Sie nutzen könnten, aber es ist inzwischen entfernt und die Menschen empfehlen mit overflow:hidden oder ein hackish margin-right: -14px Lösung.

Sorry, ich kann nicht mehr hilfreich sein-es scheint, als gäbe es kein Firefox Weg, dies zu tun aus.
- Ich habe versucht, margin-right: -14px , aber die scrollbar nicht die position zu verändern (nichts passiert mit ihm), obwohl die Inhalte in die position zu verändern auf der rechten Seite (von margin-right -14)
- aber deine Antwort ist sehr hilfreich , ich danke Ihnen so sehr 😀
- หมี เมืองทอง - sicher sein, dass das übergeordnete element ist overflow:hidden
- overflow: hidden; funktioniert einwandfrei auf FF Mac, aber Sie scheinen immer noch auf overflow: -moz-scrollbars-none; auf Windows (sogar auf dem 39.0). Allerdings MDN-Staaten ist bereits veraltet, so dass mit Vorsicht zu verwenden.
- Es ist nun möglich, in der Firefox-version, die 64. Sehen protoEvangelion Antwort.
InformationsquelleAutor Christian Ternus

Ich war in der Lage sich zu verstecken der scrollbar, aber immer noch in der Lage sein, um einen Bildlauf mit dem Mausrad mit dieser Lösung:

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

Downloaden Sie das plugin https://github.com/brandonaaron/jquery-mousewheel und bietet diese Funktion:

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

InformationsquelleAutor CrazyScientist

4

In firefox 64, wenn Sie ausblenden möchten, Blättern, wenn Sie haben overflow:auto können Sie jetzt tun scrollbar-width: none;! Woop woop! Hier sind die relevanten docs (browser-Unterstützung ist, zeigen am Ende der Seite).

Unten ist eine einfache nur css Lösung, dass Sie verstecken Ihre vertikale und horizontale scrollbar in firefox (getestet v64 & firefox dev edition v65.0b8). Hinweis: versuchen, die vertikale und horizontale scrollen auf den blauen div.

CSS:
```
.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;
}
```
HTML:
```
<div class="not-scroll-body"><span></span></div>
```
- Endlich! Es arbeitete.
- scheint nicht zu funktionieren auf der body element
InformationsquelleAutor protoEvangelion

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

Dies ist, wie ich es mache, nur CSS und funktioniert auch mit frameworks wie bootstrap. Es benötigt nur 2 zusätzliche div:

Können Sie den text, um ihn zu scrollen oder Blättern Sie es mit den Fingern, wenn Sie über einen touchscreen verfügen.

CSS:

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

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

Kurze version für faule Leute:

CSS:

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

HTML:

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

InformationsquelleAutor Jean

0

Ich davon aus, das Sie ausblenden möchten Sie die Bildlaufleiste lokal. Ich meine, nicht auf einem web-server für die Welt zu sehen, aber auf Ihre lokale Kopie von firefox, die Sie für Ihr "seh-Genuss" nur.

dies ist, was ich gefunden habe, funktionieren bei mir unter opensuse/kde:
in userChrome.css;
```
#content browser {
margin-right -12px !important;
overflow-x:hidden;
overflow-y:scroll;
}
```
verwenden -14px völlig zu verstecken, vertikal zu scrollen (oder mehr, wenn Ihr system Thema, hat ein breiteres scroll-Einstellung). Ich verwende weniger (10px) zu sehen, nur ein wenig davon, so kann ich mit der mittleren Maustaste, um zu springen, um einen Platz auf der Seite.

Sache, die ich Tat, aber nicht immer funktionieren, nicht mehr:
in der userContent.css
```
#content browser {
overflow:-moz-scrollbars-none;
}
```
-oder-
```
html {
overflow: -moz-scrollbars-none;}
}
```
oben zu arbeiten, aber ich jetzt habe ich verloren, das Maus-Rad scrollen. Nur Tastatur-Pfeiltasten funktionieren jetzt.

Hoffe, dass ich Verstand, was Sie wollen und das hilft.
Landis.

InformationsquelleAutor Landis Reed
0

Könnten Sie in der Lage sein zu verwenden overflow:-moz-hidden-unscrollable -- dies funktionierte perfekt für meine Bedürfnisse, zum Teil, weil ich war ja schon mit dragscroll.js.

InformationsquelleAutor Jon Maloto

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.