Ausblenden der Bildlaufleiste auf einer HTML-Seite

748

Kann CSS verwendet werden, um die Bildlaufleiste auszublenden? Wie würdest du das machen?

ANP
quelle
4
@UweKeim, es gibt keinen Trick für IE11
daVe

Antworten:

425

Stellen Sie overflow: hidden;das Body-Tag wie folgt ein:

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

Der obige Code verbirgt sowohl die horizontale als auch die vertikale Bildlaufleiste.

Wenn Sie nur die vertikale Bildlaufleiste ausblenden möchten , verwenden Sie overflow-y:

<style type="text/css">
    body {
        overflow-y: hidden;
    }
</style>

Wenn Sie nur die horizontale Bildlaufleiste ausblenden möchten , verwenden Sie overflow-x:

<style type="text/css">
    body {
        overflow-x: hidden;
    }
</style>

Hinweis: Außerdem wird die Bildlauffunktion deaktiviert. Lesen Sie die folgenden Antworten, wenn Sie nur die Bildlaufleiste ausblenden möchten, nicht jedoch die Bildlauffunktion.

jao
quelle
4
Es gibt keine Option "Keine" für die Überlaufeigenschaft. Zu den verfügbaren Optionen gehören: sichtbar, ausgeblendet, scrollen, automatisch, erben.
Sergiy Sokolenko
1273
Eigentlich ist dies nicht ganz die richtige Antwort: Überlauf: versteckt "versteckt" die Bildlaufleiste nicht. Außerdem wird die Bildlauffunktion auf der Seite gestoppt. Das ist nicht genau das, wonach wir fragen.
Adriendenat
17
Wenn in Chrome der Körperüberlauf auf hiddenScrollen eingestellt ist, funktioniert das Scrollen mit einem Mausrad. In Firefox funktioniert das Scrollen mit einem Mausrad nicht. Ich habe eine Weile gebraucht, um dies herauszufinden.
Doug Molineux
13
Ich sehe keinen Sinn darin, zu behaupten, dass overflow: hiddendas Scrollen deaktiviert ist. Wenn jemand die Bildlaufleiste ausblenden möchte, hält er das Steuerelement vermutlich für unnötig, da überhaupt kein Inhalt zum Scrollen vorhanden ist . Oder vielleicht wollen sie das Scrollen einfach nicht ganz zulassen .
BoltClock
39
Für mich ist die Behauptung vollkommen gültig, da die Frage darin besteht, die Bildlaufleiste auszublenden und das Scrollen nicht zu deaktivieren .
Sboisse
976

WebKit unterstützt Pseudoelemente in der Bildlaufleiste, die mit Standard-CSS-Regeln ausgeblendet werden können:

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

Wenn Sie alle Bildlaufleisten ausblenden möchten, verwenden Sie

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

Ich bin mir nicht sicher, ob ich es wiederherstellen soll - das hat funktioniert, aber es könnte einen richtigen Weg geben:

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

Sie können natürlich immer verwenden width: 0, was dann leicht wiederhergestellt werden kann width: auto, aber ich bin kein Fan von Missbrauch widthfür Sichtbarkeitsverbesserungen.

Firefox 64 unterstützt jetzt standardmäßig die experimentelle Eigenschaft für die Breite der Bildlaufleiste (63 erfordert das Setzen eines Konfigurationsflags). So blenden Sie die Bildlaufleiste in Firefox 64 aus:

#element {
    scrollbar-width: none;
}

scrollbar-widthProbieren Sie dieses Snippet aus, um festzustellen, ob Ihr aktueller Browser entweder das Pseudoelement oder unterstützt :


(Beachten Sie, dass dies keine richtige Antwort auf die Frage ist, da hier auch die horizontalen Balken ausgeblendet werden. Aber genau danach habe ich gesucht, als Google mich hierher zeigte, und ich dachte, ich würde es trotzdem posten.)

Peter
quelle
11
Genau das, wonach ich gesucht habe, da ich die Bildlaufleisten wirklich ausblenden wollte, aber die Elemente noch scrollbar sind (z. B. Auf- / Ab-Tasten)
Mathias
7
Dies sollte die beste Antwort sein, da andere Lösungen Sie nicht scrollen lassen
nuway
7
Unterstützt dies andere Browser als das Webkit? Weil es in Mozilla nicht funktioniert.
Rupam Datta
12
Es gibt jedoch eine Funktionsanforderung für den Mozilla-Tracker. Sie können möglicherweise die Implementierung beschleunigen, indem Sie dort drüben dafür stimmen :)
Peter
3
DAS IST DIE RICHTIGE ANTWORT! Da fehlen andere. Das Problem besteht nicht nur darin, die Bildlaufleiste auszublenden, sondern auch darin, wie sich der Überlauf auf andere Stile auswirkt. Genau das gleiche Problem habe ich in unserer App festgestellt. Wir möchten NICHT, dass 99% der App automatisch überlaufen. Es gibt jedoch einen Hilfeabschnitt, in dem der Benutzer nach unten scrollen kann. Da der Körper übergelaufen ist: versteckt, war der einzige Wan, der damit umgehen konnte, eine ng-Klasse auf der Wurzel, oder dank dieser Leute, nur mit etwas CSS.
Leon Gaban
524

Mehr oder weniger..

Wenn Sie die Frage stellen: "Können die Bildlaufleisten eines Browsers auf irgendeine Weise entfernt werden, anstatt einfach ausgeblendet oder getarnt zu werden?", Sagen alle "Nicht möglich", da es nicht möglich ist , die Bildlaufleisten aus allen Browsern in einem Browser zu entfernen konform und kompatibel, und dann gibt es das ganze Argument der Benutzerfreundlichkeit.

Es ist jedoch möglich zu verhindern, dass der Browser jemals Bildlaufleisten generieren und anzeigen muss, wenn Sie nicht zulassen, dass Ihre Webseite überläuft.

Dies bedeutet nur, dass wir proaktiv das gleiche Verhalten ersetzen müssen, das der Browser normalerweise für uns tun würde, und dem Browser Danke sagen müssen, aber nein, danke Kumpel. Anstatt zu versuchen, Bildlaufleisten zu entfernen (von denen wir alle wissen, dass sie nicht möglich sind), können wir das Scrollen vermeiden (durchaus machbar) und innerhalb der Elemente scrollen, die wir erstellen und über die wir mehr Kontrolle haben.

Erstellen Sie ein Div mit ausgeblendetem Überlauf. Erkennen Sie, wenn der Benutzer versucht, einen Bildlauf durchzuführen, dies jedoch nicht möglich ist, da wir die Browserfunktion zum Überlaufen mit Überlauf deaktiviert haben: hidden .. und verschieben Sie den Inhalt stattdessen mithilfe von JavaScript nach oben, wenn dies auftritt. Erstellen Sie dabei unser eigenes Scrollen, ohne dass der Browser standardmäßig scrollt, oder verwenden Sie ein Plugin wie iScroll .

--- ---.

Um gründlich zu sein; Alle herstellerspezifischen Möglichkeiten zur Bearbeitung von Bildlaufleisten:

Internet Explorer 5.5+

* Diese Eigenschaften waren weder Teil der CSS-Spezifikation noch wurden sie jemals genehmigt oder dem Hersteller vorangestellt, aber sie funktionieren in Internet Explorer und Konqueror. Diese können auch lokal im Benutzer-Stylesheet für jede Anwendung festgelegt werden. In Internet Explorer finden Sie es auf der Registerkarte "Eingabehilfen", in Konqueror auf der Registerkarte "Stylesheets".

body, html { /* These are defaults and can be replaced by hexadecimal color values */
    scrollbar-base-color: aqua;
    scrollbar-face-color: ThreeDFace;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;
}

Ab Internet Explorer 8 wurde diesen Eigenschaften von Microsoft ein Herstellerpräfix vorangestellt, sie wurden jedoch von W3C noch nie genehmigt .

-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color

Weitere Details zu Internet Explorer

Internet Explorer macht scroll Verfügung, mit dem festgelegt wird, ob Bildlaufleisten deaktiviert oder aktiviert werden sollen. Es kann auch verwendet werden, um den Wert der Position der Bildlaufleisten abzurufen.

Wenn Sie in Microsoft Internet Explorer 6 und höher die !DOCTYPEDeklaration verwenden, um den standardkonformen Modus anzugeben, gilt dieses Attribut für das HTML-Element. Wenn wie in früheren Versionen von Internet Explorer kein standardkonformer Modus angegeben ist, gilt dieses Attribut für das BODYElement, NICHT für das HTMLElement.

Es ist auch erwähnenswert, dass bei der Arbeit mit .NET die ScrollBar-Klasse im System.Windows.Controls.PrimitivesPresentation Framework für das Rendern der Bildlaufleisten verantwortlich ist.

http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx


WebKit

WebKit-Erweiterungen im Zusammenhang mit der Anpassung der Bildlaufleiste sind:

::-webkit-scrollbar {}             /* 1 */
::-webkit-scrollbar-button {}      /* 2 */
::-webkit-scrollbar-track {}       /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {}       /* 5 */
::-webkit-scrollbar-corner {}      /* 6 */
::-webkit-resizer {}               /* 7 */

Geben Sie hier die Bildbeschreibung ein

Diese können jeweils mit zusätzlichen Pseudo-Selektoren kombiniert werden:

  • :horizontal - Die horizontale Pseudoklasse gilt für alle Bildlaufleistenelemente mit horizontaler Ausrichtung.
  • :vertical - Die vertikale Pseudoklasse gilt für alle Bildlaufleistenelemente mit vertikaler Ausrichtung.
  • :decrement- Die Dekrement-Pseudoklasse gilt für Schaltflächen und Spurstücke. Es zeigt an, ob die Schaltfläche oder das Spurstück die Position der Ansicht bei Verwendung verringert (z. B. oben auf einer vertikalen Bildlaufleiste, links auf einer horizontalen Bildlaufleiste).
  • :increment- Die Inkrement-Pseudoklasse gilt für Schaltflächen und Spurstücke. Es zeigt an, ob eine Schaltfläche oder ein Trackstück die Position der Ansicht erhöht, wenn sie verwendet wird (z. B. unten auf einer vertikalen Bildlaufleiste, rechts auf einer horizontalen Bildlaufleiste).
  • :start- Die Start-Pseudoklasse gilt für Buttons und Trackstücke. Es zeigt an, ob das Objekt vor dem Daumen platziert ist.
  • :end- Die Endpseudoklasse gilt für Buttons und Trackstücke. Es zeigt an, ob das Objekt hinter dem Daumen platziert ist.
  • :double-button- Die Doppelknopf-Pseudoklasse gilt für Knöpfe und Spurstücke. Es wird verwendet, um zu erkennen, ob eine Schaltfläche Teil eines Schaltflächenpaars ist, das sich am selben Ende einer Bildlaufleiste befindet. Bei Spurstücken gibt es an, ob das Spurstück an zwei Tasten anliegt.
  • :single-button- Die Pseudoklasse mit einem Knopf gilt für Knöpfe und Spurstücke. Es wird verwendet, um zu erkennen, ob sich eine Schaltfläche am Ende einer Bildlaufleiste befindet. Bei Trackstücken wird angezeigt, ob das Trackstück an eine Singleton-Schaltfläche angrenzt.
  • :no-button - Gilt für Spurstücke und gibt an, ob das Spurstück bis zum Rand der Bildlaufleiste verläuft oder nicht, dh an diesem Ende der Spur befindet sich keine Schaltfläche.
  • :corner-present - Gilt für alle Bildlaufleistenelemente und gibt an, ob eine Bildlaufleistenecke vorhanden ist oder nicht.
  • :window-inactive- Gilt für alle Bildlaufleistenelemente und gibt an, ob das Fenster mit der Bildlaufleiste derzeit aktiv ist. (In den letzten Nachtzeitungen gilt diese Pseudoklasse jetzt auch für die :: Auswahl. Wir planen, sie auf alle Inhalte auszudehnen und sie als neue Standard-Pseudoklasse vorzuschlagen.)

Beispiele für diese Kombinationen

::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

Weitere Details zu Chrome

addWindowScrollHandler public static HandlerRegistration addWindowScrollHandler (Window.ScrollHandler-Handler)

  Fügt einen Window.ScrollEvent-Handler hinzu Parameter: handler - der Handler Rückgabe: Gibt die Handlerregistrierung zurück [ Quelle ] ( http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html# addWindowScrollHandler (com.google.gwt.user.client.Window.ScrollHandler) )


Mozilla

Mozilla verfügt zwar über einige Erweiterungen zum Bearbeiten der Bildlaufleisten, es wird jedoch empfohlen, diese nicht zu verwenden.

  • -moz-scrollbars-none Sie empfehlen die Verwendung von Überlauf: stattdessen versteckt.
  • -moz-scrollbars-horizontal Ähnlich wie bei Überlauf-x
  • -moz-scrollbars-vertical Ähnlich wie bei Überlauf
  • -moz-hidden-unscrollableFunktioniert nur intern innerhalb der Benutzerprofileinstellungen. Deaktiviert das Scrollen von XML-Stammelementen und deaktiviert das Scrollen von Webseiten mithilfe der Pfeiltasten und des Mausrads.

  • Mozilla Developer Docs zum Thema "Überlauf"

Weitere Details zu Mozilla

Dies ist meines Wissens nicht wirklich nützlich, aber es ist erwähnenswert, dass das Attribut, das steuert, ob Bildlaufleisten in Firefox angezeigt werden oder nicht, ( Referenzlink ) lautet :

  • Attribut:        Bildlaufleisten
  •               Geben Sie Folgendes ein : nsIDOMBarProp
  • Beschreibung:   Das Objekt, das steuert, ob Bildlaufleisten im Fenster angezeigt werden. Dieses Attribut ist in JavaScript "ersetzbar". Schreibgeschützt

Last but not least ist Polsterung wie Magie.

Wie bereits in einigen anderen Antworten erwähnt, ist hier eine Illustration, die ausreichend selbsterklärend ist.

Geben Sie hier die Bildbeschreibung ein


Geschichtsunterricht

Bildlaufleisten

Nur weil ich neugierig bin, wollte ich etwas über die Herkunft von Bildlaufleisten erfahren, und dies sind die besten Referenzen, die ich gefunden habe.

Sonstiges

In einem HTML5-Spezifikationsentwurf wurde das seamlessAttribut definiert, um zu verhindern, dass Bildlaufleisten in iFrames angezeigt werden, damit sie mit dem umgebenden Inhalt einer Seite gemischt werden können . Dieses Element wird jedoch in der letzten Version nicht angezeigt.

Das scrollbarBarProp-Objekt ist ein untergeordnetes Objekt des windowObjekts und stellt das Benutzeroberflächenelement dar, das einen Bildlaufmechanismus oder ein ähnliches Schnittstellenkonzept enthält. window.scrollbars.visiblewird zurückgegeben, truewenn die Bildlaufleisten sichtbar sind.

interface Window {
  // The current browsing context
  readonly attribute WindowProxy window;
  readonly attribute WindowProxy self;
           attribute DOMString name;
  [PutForwards=href] readonly attribute Location location;
  readonly attribute History history;
  readonly attribute UndoManager undoManager;
  Selection getSelection();
  [Replaceable] readonly attribute BarProp locationbar;
  [Replaceable] readonly attribute BarProp menubar;
  [Replaceable] readonly attribute BarProp personalbar;
  [Replaceable] readonly attribute BarProp scrollbars;
  [Replaceable] readonly attribute BarProp statusbar;
  [Replaceable] readonly attribute BarProp toolbar;
  void close();
  void focus();
  void blur();
  // Truncated

Die Verlaufs-API enthält auch Funktionen zur Wiederherstellung des Bildlaufs bei der Seitennavigation, um die Bildlaufposition beim Laden der Seite beizubehalten.

window.history.scrollRestoration kann verwendet werden, um den Status der Bildlaufwiederherstellung zu überprüfen oder ihren Status zu ändern (Anhängen ="auto"/"manual" . Auto ist der Standardwert. Wenn Sie ihn auf manuell , übernehmen Sie als Entwickler das Eigentum an allen Bildlaufänderungen, die möglicherweise erforderlich sind, wenn ein Benutzer den Verlauf der App durchläuft Wenn nötig, können Sie die Bildlaufposition verfolgen, während Sie Verlaufseinträge mit history.pushState () verschieben.

--- ---.

Weiterführende Literatur:

Beispiele

Davidcondrey
quelle
27
Diese Antwort würde für deutlich mehr Browser (nämlich IE) gelten als für die derzeit positiv bewertete Antwort.
Matt Jensen
Tolle Ergänzung. Habe heute tatsächlich die gleiche Lösung implementiert! Erwähnenswert ist möglicherweise, dass das andere Element überlaufen sollte: versteckt;
Matt Jensen
2
Dies ist die richtige Antwort mit allen Funktionen. Ich erkläre, dass Sie die Überlaufregel verwenden können, wenn Sie einen Benutzer einfach am Scrollen hindern möchten. Sie können auch Ihre eigene Scrolling-Funktion implementieren. Wenn dies nicht ausreicht, können Sie die Eigenschaften der Bildlaufleiste direkt mit unterschiedlichen Regeln für verschiedene Browser festlegen.
Newshorts
1
Dies ist zwar eine unglaublich gut durchdachte Antwort, sehr detailliert und mit vielen Ressourcen verknüpft, aber es gibt massive Probleme für Benutzer von Hilfstechnologien, wenn Sie das Scrollen deaktivieren und Javascript verwenden, um das Scrollen zu handhaben. Wenn Sie nicht jedes Mal, wenn Sie für den Benutzer scrollen, den Fokus auf ein Element setzen, geht Ihr AT-Benutzer vollständig verloren. Außerdem hat Ihr Benutzer jetzt die Kontrolle darüber verloren, was er sieht. Sehr schlechtes UX, um das Scrollen für Ihren Benutzer zu übernehmen.
ShiningLight
Firefox Quantum 63.0.1 unter MacOS High Sierra verbirgt die Bildlaufleiste auch mit der Regel "Überlauf: -moz-Bildlaufleisten-keine" nicht. Kennt jemand eine Lösung dafür? Alle anderen Browser scheinen mit den vorgeschlagenen Lösungen zu funktionieren.
Simona Adriani
106

Sie können dies mit einem Wrapper erreichen div, dessen Überlauf ausgeblendet und dessen innerer divSatz auf eingestellt ist auto.

Um die divBildlaufleiste des Inneren zu entfernen , können Sie sie aus dem divAnsichtsfenster des Äußeren herausziehen, indem Sie einen negativen Rand auf das Innere anwenden div. Wenden Sie dann die gleiche Auffüllung auf das innere Div an, damit der Inhalt im Blick bleibt.

JSFiddle

HTML

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

CSS

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}
thgaskell
quelle
8
Dies sollte die akzeptierte Antwort imo sein. Das einzige, was ich hinzufügen musste, war height: inheritedin der .viewportCSS.
Helzgate
4
Das einzige Problem bei dieser Antwort ist der "tote" Raum, den die verschobene Bildlaufleiste hinterlässt, da wir die Breite der Bildlaufleiste nicht kennen, um sie vom Abstand zu subtrahieren.
Frondor
3
Außerdem müssen Sie keine festen Werte für die Auffüllung und die Ränder verwenden. 100%ist vielseitiger und macht den Job.
Frondor
Hat in IE11, Operah und Chrome gearbeitet und Firefox noch nicht getestet. Das ist eine großartige Antwort, +1.
Fast ein Anfänger
warum -100pxund 100px??
Oldboy
61

Dies funktioniert bei mir mit einfachen CSS-Eigenschaften:

.container {
    -ms-overflow-style: none;  // Internet Explorer 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

Verwenden Sie für ältere Versionen von Firefox: overflow: -moz-scrollbars-none;

Hristo Eftimov
quelle
2
Leider funktioniert dies in FireFox 48.0.2 unter macOS Sierra nicht. Wenn Sie dies tun overflow: -moz-scrollbars-none;, entfernen Sie erfolgreich die Bildlaufleiste, aber Sie entfernen auch die Fähigkeit zum Scrollen. Genauso gut könnte man nur eingestellt , overflow: hiddenum die .container.
Martyn Chamberlin
1
Oh, und von developer.mozilla.org/en-US/docs/Web/CSS/overflow lesen wir Folgendes -moz-scrollbars-none: "Dies ist eine veraltete API, deren Funktion nicht mehr garantiert ist."
Martyn Chamberlin
1
Ich habe meine Antwort mit der neuesten Unterstützung für Firefox aktualisiert :)
Hristo Eftimov
56

Hier ist meine Lösung, die theoretisch alle modernen Browser abdeckt:

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

html kann durch jedes Element ersetzt werden, dessen Bildlaufleiste ausgeblendet werden soll.

Hinweis : Ich habe die anderen 19 Antworten überflogen, um festzustellen, ob der von mir veröffentlichte Code bereits behandelt wurde, und es scheint, als würde keine einzige Antwort die Situation im Jahr 2019 zusammenfassen, obwohl viele von ihnen sehr detailliert sind. Entschuldigung, wenn dies von jemand anderem gesagt wurde und ich es verpasst habe.

Wilf
quelle
3
am meisten unterschätzte Antwort hier
AGrush
Einzige Lösung, die meinen Scroll-Albtraum behoben hat: D Danke!
Boomdrak
21

Ich glaube, ich habe eine Problemumgehung für euch gefunden, wenn ihr noch interessiert seid. Dies ist meine erste Woche, aber es hat bei mir funktioniert ...

<div class="contentScroller">
    <div class="content">
    </div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}
Ben Yo
quelle
Funktioniert für mich in Chrome und Firefox, habe IE oder einen anderen Browser nicht getestet. jsfiddle.net/8xtfk729
Ben Davis
1
Auf Chrome (mindestens v54) wird dadurch das Scrollen über das Scrollrad aus irgendeinem Grund deaktiviert. Scrollen Sie mit den Pfeiltasten nach Hause / Ende / pg nach unten / pg nach oben, berühren Sie Flick und Mausklick und Ziehen funktioniert immer noch.
House3272
Diese Antwort ist legitim, funktioniert tatsächlich und scheint in allen Browsern zu funktionieren.
Sam
Das verbirgt die ganze Div auf meiner Seite
Jonny
16

Wenn Sie nach einer Lösung suchen, um eine Bildlaufleiste für mobile Geräte auszublenden, folgen Sie Peters Antwort !

Hier ist eine jsfiddle , die die folgende Lösung verwendet, um eine horizontale Bildlaufleiste auszublenden.

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

Es wurde auf einem Samsung-Tablet mit Android 4.0.4 (Ice Cream Sandwich, sowohl im nativen Browser als auch in Chrome) und auf einem iPad mit iOS 6 (sowohl in Safari als auch in Chrome) getestet.

Alex
quelle
Seine Antwort funktioniert nicht auf Chrome und Safari in iOS 12.3
Oldboy
11

Verwenden Sie, wie die anderen bereits gesagt haben, CSS overflow.

Wenn Sie jedoch weiterhin möchten, dass der Benutzer diesen Inhalt scrollen kann (ohne dass die Bildlaufleiste sichtbar ist), müssen Sie JavaScript verwenden.

Siehe meine Antwort hier für eine Lösung: Bildlaufleiste ausblenden, während Sie noch mit Maus / Tastatur scrollen können

Peter Örneholm
quelle
1
Dies ist die richtige Antwort und sollte die erste sein. Alles darüber beantwortet die vorliegende Frage nicht. OP fragt nicht nach deaktiviertem Bildlauf, er möchte die Bildlaufleiste ausblenden.
Pixelpax
11

Zusätzlich zu Peters Antwort:

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

Dies funktioniert für Internet Explorer 10 genauso:

 #element {
      -ms-overflow-style: none;
 }
JoshW
quelle
10

Browserübergreifender Ansatz zum Ausblenden der Bildlaufleiste.

Es wurde auf Edge, Chrome, Firefox und Safari getestet

Bildlaufleiste ausblenden, während Sie noch mit dem Mausrad scrollen können!

Codepen

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}
Blake Plumb
quelle
1
Eine Erklärung, wie dies funktioniert, wäre wünschenswert - mit Eltern / Kind-Sichtbarkeit zu spielen, um die Bildlaufleiste auszublenden, ist schrecklich
JackyJohnson
1
@believesInSanta Ich habe Kommentare und Codepen hinzugefügt, um es besser zu erklären. Ich stimme Ihrer Einschätzung nicht zu, dass das Spielen mit der Sichtbarkeit eine schreckliche Möglichkeit ist, die Bildlaufleiste auszublenden. Ich verstehe, dass es ein Hack ist, aber der richtige Weg, um diesen Effekt zu erzielen, wäre, wenn alle Browser eine Möglichkeit unterstützen, die Bildlaufleiste separat zu gestalten, wie es Chrome und Safari erlauben.
Blake Plumb
2
Ich habe mich einfach in deine Lösung verliebt. Es funktioniert perfekt (wird in Apps verwendet, die für moderne Browser entwickelt wurden). Ich danke dir sehr!
Maxime Lafarie
7

Wenn Sie möchten, dass das Scrollen funktioniert, bevor Sie die Bildlaufleisten ausblenden, sollten Sie sie stylen. Moderne Versionen von OS X und mobilen Betriebssystemen verfügen über Bildlaufleisten, die zwar für das Greifen mit der Maus unpraktisch sind, aber dennoch sehr schön und neutral sind.

Bildlaufleisten ausblenden, eine Technik von John Kurlak funktioniert gut, außer dass Firefox-Benutzer, die keine Touchpads haben, keine Möglichkeit zum haben, es sei denn, sie haben eine Maus mit einem Rad, was sie wahrscheinlich tun, aber selbst dann können sie normalerweise nur vertikal scrollen .

Johns Technik verwendet drei Elemente:

  • Ein äußeres Element zum Maskieren der Bildlaufleisten.
  • Ein mittleres Element für die Bildlaufleisten.
  • Und ein Inhaltselement, mit dem sowohl die Größe des mittleren Elements als auch Bildlaufleisten festgelegt werden können.

Es muss möglich sein, die Größe der äußeren und der Inhaltselemente gleich einzustellen, wodurch die Verwendung von Prozentsätzen entfällt, aber ich kann mir nichts anderes vorstellen, das mit der richtigen Optimierung nicht funktioniert.

Meine größte Sorge ist, ob alle Browserversionen Bildlaufleisten festlegen, um übergelaufene Inhalte sichtbar zu machen. Ich habe in aktuellen Browsern getestet, aber nicht in älteren.

Verzeihen Sie meinen SASS ; P.

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

Testen

OS X ist 10.6.8. Windows ist Windows 7.

  • Firefox 32.0 Bildlaufleisten ausgeblendet. Die Pfeiltasten scrollen auch nach dem Klicken nicht, um zu fokussieren, aber das Mausrad und zwei Finger auf dem Trackpad tun dies. OS X und Windows.
  • Chrome 37.0 Bildlaufleisten ausgeblendet. Die Pfeiltasten funktionieren nach dem Klicken, um zu fokussieren. Mausrad und Trackpad funktionieren. OS X und Windows.
  • Internet Explorer 11 Bildlaufleisten ausgeblendet. Die Pfeiltasten funktionieren nach dem Klicken, um zu fokussieren. Mausrad funktioniert. Windows.
  • Safari 5.1.10 Bildlaufleisten ausgeblendet. Die Pfeiltasten funktionieren nach dem Klicken, um zu fokussieren. Mausrad und Trackpad funktionieren. OS X.
  • Android 4.4.4 und 4.1.2. Bildlaufleisten ausgeblendet. Touch Scrolling funktioniert. Versucht in Chrome 37.0, Firefox 32.0 und HTMLViewer unter 4.4.4 (was auch immer das ist). In HTMLViewer hat die Seite die Größe des maskierten Inhalts und kann auch gescrollt werden! Das Scrollen interagiert akzeptabel mit dem Zoomen von Seiten.
Seth W. Klein
quelle
1
Nicht verwandte Anmerkung (soweit die Frage geht). In diesem Fall sollten Sie @extend versus @include verwenden. Rufen @mixin{}Sie stattdessen %size{}in den CSS-Selektoren auf @extend %size;. Mixins werden normalerweise verwendet, wenn Sie Variablen einlesen, um ein Ergebnis zurückzugeben. Platzhalter (auch bekannt als @extend) sind für einfachen, wiederholten Code wie diesen gedacht - bei dem keine "Funktion" benötigt wird.
Mike Barwick
1
Ich habe bearbeitet, um @extend zu verwenden. Das Ergebnis ist für Leute, die SCSS nicht kennen, wahrscheinlich weniger verständlich, aber gut genug.
Seth W. Klein
6

Ich dachte nur, ich würde jedem anderen, der diese Frage liest, darauf hinweisen, dass die Einstellung overflow: hidden(oder der Überlauf) auf derbody Elements die Bildlaufleisten für mich nicht ausgeblendet hat.

Ich musste das htmlElement verwenden.

Brad Azevedo
quelle
3
Ich kann mich nicht genau erinnern, seit es vor ein paar Monaten war, aber ich glaube, dass das Einstellen des Überlaufs auf dem Körper in Chrome funktioniert hat, aber nicht in Firefox (oder umgekehrt). Die Verwendung des HTML-Tags funktionierte jedoch bei beiden.
Brad Azevedo
Aus dem Speicher kann dies ein Mackenmodusunterschied sein.
Thomasrutter
5

Ich habe eine WebKit-Version mit einigen Optionen wie " Automatisch ausblenden" , " Kleine Version" , " Nur-Bildlauf" oder " Nur-X" geschrieben :

._scrollable{
    @size: 15px;
    @little_version_ratio: 2;
    @scrollbar-bg-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color-hover: rgba(0,0,0,0.3);
    @scrollbar-coner-color: rgba(0,0,0,0);

    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;

    &::-webkit-scrollbar {
        background: none;
        width: @size;
        height: @size;
    }

    &::-webkit-scrollbar-track {
        background-color:@scrollbar-bg-color;
        border-radius: @size;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: @size;
        background-color:@scrollbar-handler-color;
        &:hover{
            background-color:@scrollbar-handler-color-hover;
        }
    }

    &::-webkit-scrollbar-corner {
      background-color: @scrollbar-coner-color;
    }

    &.little{
        &::-webkit-scrollbar {
            background: none;
            width: @size / @little_version_ratio;
            height: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-track {
            border-radius: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: @size / @little_version_ratio;
        }
    }

    &.autoHideScrollbar{
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover{
            overflow-y: scroll;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            &.only-y{
                overflow-y: scroll !important;
                overflow-x: hidden !important;
            }

            &.only-x{
                overflow-x: scroll !important;
                overflow-y: hidden !important;
            }
        }
    }

    &.only-y:not(.autoHideScrollbar){
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    &.only-x:not(.autoHideScrollbar){
        overflow-x: scroll !important;
        overflow-y: hidden !important;
    }
}

http://codepen.io/hicTech/pen/KmKrjb

Marco Allori
quelle
5

Kopieren Sie diesen CSS-Code in den Kundencode, um die Bildlaufleiste auszublenden:

<style>

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

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

</style>
Huu Phong Nguyen
quelle
4

Mein HTML ist wie folgt:

<div class="container">
  <div class="content">
  </div>
</div>

Fügen Sie dies zu Ihrer Stelle hinzu, divan der Sie die Bildlaufleiste ausblenden möchten:

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

Und fügen Sie dies dem Behälter hinzu

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}
Timo
quelle
3

Um die vertikale Bildlaufleiste zu deaktivieren, fügen Sie einfach hinzu overflow-y:hidden;.

Erfahren Sie mehr darüber: Überlauf .

Pranay Rana
quelle
3

Meine Antwort wird auch dann angezeigt, wenn Sie overflow:hidden;jQuery verwenden:

Scrollen Sie beispielsweise horizontal mit dem Mausrad:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
    $(function() {

       $("YourSelector").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>
Rasel
quelle
2
Scrolljacking funktioniert, ist aber fast immer eine schlechte Benutzererfahrung.
Brandon Anzaldi
1
Während dies möglich ist, gibt es mit einem guten Beispiel massive Probleme für Benutzer von Hilfstechnologien, wenn Sie das Scrollen deaktivieren und Javascript verwenden, um das Scrollen zu handhaben. Wenn Sie nicht jedes Mal, wenn Sie für den Benutzer scrollen, den Fokus auf ein Element setzen, geht Ihr AT-Benutzer vollständig verloren. Außerdem hat jeder Benutzer jetzt die Kontrolle darüber verloren, was er sieht. Sehr schlechtes UX, um das Scrollen für Ihren Benutzer zu übernehmen. Neben dem Mausrad müssen Sie auch Auf- / Ab-Tasten, Rotoren des Bildschirmlesegeräts, Mausklicks und Touchpad-Steuerelemente bedienen. Dies wird für den Entwickler unhandlich und für den Benutzer schrecklich.
ShiningLight
2

Ich glaube, Sie können es mit dem overflowCSS-Attribut manipulieren , aber sie haben eine eingeschränkte Browserunterstützung. Einer Quelle zufolge handelte es sich um Internet Explorer 5 (und höher), Firefox 1.5 (und höher) und Safari 3 (und höher) - möglicherweise genug für Ihre Zwecke.

Scrollen, Scrollen, Scrollen hat eine gute Diskussion.

Stefan Mohr
quelle
1
Guter Link. Es ist schön zu wissen, wie das Ergebnis auf mehreren Browsern ist. Leider ist die Zahl für einen Screenshot der fertigen Ergebnisse gebrochen
Chetabahana
-1

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

body {
  overflow-y: scroll;
  margin-right: -20px;
}
John Carroll
quelle