Ausblenden der Bildlaufleiste auf einer HTML-Seite

Question

Kann man mit CSS die Bildlaufleiste ausblenden? Wie würden Sie dies tun?

Answer 1

WebKit unterstützt Pseudoelemente für Bildlaufleisten, 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 das Wiederherstellen funktioniert, aber vielleicht gibt es einen richtigen Weg, es zu tun:

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

Sie können natürlich jederzeit die width: 0 die dann leicht wiederhergestellt werden können mit width: auto aber ich bin kein Freund des Missbrauchs width für die Verbesserung der Sichtbarkeit.

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

#element {
    scrollbar-width: none;
}

Um festzustellen, ob Ihr aktueller Browser entweder das Pseudoelement oder scrollbar-width probieren Sie diesen Ausschnitt aus:

.content {
  /* These rules create an artificially confined space, so we get
     a scrollbar that we can hide. They are not directly involved in
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

---

(Beachten Sie, dass dies nicht wirklich eine korrekte Antwort auf die Frage ist, weil es auch die horizontalen Balken ausblendet, aber das war es, wonach ich suchte, als Google mich hierher führte, also dachte ich, ich würde es trotzdem posten).

Answer 2

Ja, sozusagen

Wenn Sie die Frage stellen: "Können die Bildlaufleisten eines Browsers auf irgendeine Weise entfernt werden, anstatt einfach nur versteckt oder getarnt zu werden", wird jeder sagen: "Nicht möglich", denn es ist nicht möglich, die entfernen die Bildlaufleisten in allen Browsern in einer kompatiblen und cross-kompatiblen Weise, und dann ist da noch das ganze Argument der Benutzerfreundlichkeit.

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

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

Erstellen Sie ein Div mit verstecktem Überlauf. Erkennen Sie, wenn der Benutzer versucht zu scrollen, aber nicht in der Lage ist, weil wir die Fähigkeit des Browsers, mit overflow: hidden zu scrollen, deaktiviert haben, und verschieben Sie stattdessen den Inhalt mit JavaScript nach oben, wenn dies geschieht. Dadurch schaffen wir unser eigenes Scrolling ohne das Standard-Scrolling des Browsers oder verwenden ein Plugin wie iScroll .

---

Der Gründlichkeit halber: alle anbieterspezifischen Möglichkeiten zur Manipulation von Bildlaufleisten:

Internet Explorer 5.5+

*Diese Eigenschaften waren nie Teil der CSS-Spezifikation, noch wurden sie jemals genehmigt oder vom Hersteller vorgegeben, aber sie funktionieren in Internet Explorer und Konqueror. Sie können auch lokal in der Benutzervorlage für jede Anwendung eingestellt werden. Im Internet Explorer finden Sie sie unter der Registerkarte "Barrierefreiheit", in Konqueror unter 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 wurden diese Eigenschaften von Microsoft mit einem Hersteller-Präfix versehen, aber sie wurden trotzdem nie von W3C .

-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 Informationen zum Internet Explorer

Internet Explorer macht scroll zur Verfügung, mit der festgelegt wird, ob die Bildlaufleisten deaktiviert oder aktiviert werden sollen; sie kann auch verwendet werden, um den Wert der Position der Bildlaufleisten zu ermitteln.

Mit Microsoft Internet Explorer 6 und höher können Sie bei Verwendung der !DOCTYPE um den standardkonformen Modus anzugeben, gilt dieses Attribut für das HTML-Element. Wenn der standardkonforme Modus nicht angegeben ist, wie bei früheren Versionen des Internet Explorer, gilt dieses Attribut für das BODY Element, NICHT その HTML Element.

Es ist auch erwähnenswert, dass bei der Arbeit mit .NET die ScrollBar-Klasse in System.Windows.Controls.Primitives im Präsentations-Framework ist für die Darstellung der Bildlaufleisten verantwortlich.

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

• MSDN. Grundlegende UI-Eigenschaften
• W3C. Über nicht standardmäßige Eigenschaften von Bildlaufleisten
• MSDN. .NET ScrollBar-Klasse

---

WebKit

WebKit-Erweiterungen für die 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 */

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

• :horizontal - Die Pseudoklasse horizontal gilt für alle horizontal ausgerichteten Teile von Bildlaufleisten.
• :vertical - Die vertikale Pseudoklasse gilt für alle Bildlaufleisten, die vertikal ausgerichtet sind.
• :decrement - Die Pseudoklasse Dekrement gilt für Schaltflächen und Gleisstücke. Sie gibt an, ob die Schaltfläche oder das Track Piece die Position der Ansicht verringert, wenn sie/es verwendet wird (z. B. nach oben bei einer vertikalen Bildlaufleiste, nach links bei einer horizontalen Bildlaufleiste).
• :increment - Die Pseudoklasse Inkrement gilt für Schaltflächen und Gleisstücke. Sie gibt an, ob eine Schaltfläche oder ein Trackpiece die Position der Ansicht erhöht, wenn sie/es verwendet wird (z. B. nach unten bei einer vertikalen Bildlaufleiste, nach rechts bei einer horizontalen Bildlaufleiste).
• :start - Die Pseudoklasse Start gilt für Schaltflächen und Gleisstücke. Sie gibt an, ob das Objekt vor dem Daumen platziert ist.
• :end - Die Pseudoklasse Ende gilt für Knöpfe und Schienenstücke. Sie gibt an, ob das Objekt hinter dem Daumen platziert wird.
• :double-button - Die Pseudoklasse "Doppeltaste" gilt für Tasten und Schienenstücke. Sie wird verwendet, um zu erkennen, ob eine Schaltfläche Teil eines Paares von Schaltflächen ist, die sich zusammen am gleichen Ende einer Bildlaufleiste befinden. Bei Gleisstücken zeigt sie an, ob das Gleisstück an ein Paar von Schaltflächen angrenzt.
• :single-button - Die Pseudoklasse "Einzelne Taste" gilt für Tasten und Schienenstücke. Sie wird verwendet, um zu erkennen, ob eine Schaltfläche allein am Ende einer Bildlaufleiste steht. Bei Trackstücken zeigt sie an, ob das Trackstück an eine einzelne Schaltfläche angrenzt.
• :no-button - Gilt für Gleisstücke und gibt an, ob das Gleisstück bis zum Rand des Rollbalkens reicht, d. h., dass es an diesem Ende des Gleises keine Schaltfläche gibt.
• :corner-present - Gilt für alle Bildlaufleisten und zeigt an, ob eine Bildlaufleistenecke vorhanden ist oder nicht.
• :window-inactive - Gilt für alle Bildlaufleisten und zeigt an, ob das Fenster, das die Bildlaufleiste enthält, gerade aktiv ist oder nicht. (In den letzten Nightlies gilt diese Pseudoklasse nun auch für ::selection. Wir planen, sie so zu erweitern, dass sie mit jedem Inhalt funktioniert, 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 */ }

• Gestalten von Bildlaufleisten - Webkit.org

Weitere Details zu Chrome

addWindowScrollHandler public static HandlerRegistration addWindowScrollHandler(Window.ScrollHandler handler)

  Fügt einen Window.ScrollEvent-Handler hinzu Parameter:   handler - der Handler Gibt zurück:   gibt die Registrierung des Handlers 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 hat zwar einige Erweiterungen zur Manipulation der Bildlaufleisten, aber es wird empfohlen, diese nicht zu verwenden.

• -moz-scrollbars-none Es wird empfohlen, stattdessen overflow:hidden zu verwenden.

• -moz-scrollbars-horizontal Ähnlich wie bei overflow-x

• -moz-scrollbars-vertical Ähnlich wie bei overflow-y

• -moz-hidden-unscrollable Funktioniert nur intern in den Profileinstellungen eines Benutzers. Deaktiviert das Scrollen von XML-Wurzelelementen und deaktiviert die Verwendung von Pfeiltasten und Mausrad zum Scrollen von Webseiten.

• Mozilla-Entwickler-Docs zum Thema 'Überlauf'

Weitere Informationen über Mozilla

Soweit ich weiß, ist dies nicht wirklich nützlich, aber es ist erwähnenswert, dass das Attribut, das steuert, ob Scrollbalken in Firefox angezeigt werden oder nicht, ( Referenzlink ):

• Attribut:        Bildlaufleisten
• Art:               nsIDOMBarProp
• Beschreibung:   Das Objekt, das steuert, ob Bildlaufleisten im Fenster angezeigt werden oder nicht. Dieses Attribut ist in JavaScript "ersetzbar". Nur lesen

Und nicht zuletzt ist die Polsterung wie Magie.

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

---

Geschichtsunterricht

Aus reiner Neugier wollte ich etwas über den Ursprung der Bildlaufleisten erfahren, und dies sind die besten Referenzen, die ich gefunden habe.

• 10 Erfindungen zu Bildlauf und Bildlaufleisten
• https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
• https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

Sonstiges

In einem Entwurf der HTML5-Spezifikation wird die seamless Attribut wurde definiert, um zu verhindern, dass Bildlaufleisten in iFrames erscheinen, damit sie mit dem umgebenden Inhalt einer Seite verschmelzen können . Dieses Element ist jedoch in der letzten Revision nicht mehr enthalten.

El scrollbar BarProp-Objekt ist ein untergeordnetes Objekt des window Objekt und stellt das Element der Benutzeroberfläche dar, das einen Bildlaufmechanismus oder ein ähnliches Schnittstellenkonzept enthält. window.scrollbars.visible wird zurückgegeben true wenn 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 History-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 von scrollrestoration zu überprüfen oder den Status zu ändern (Anhängen von ="auto"/"manual" . Auto ist der Standardwert. Das Ändern auf manuell bedeutet, dass Sie als Entwickler die Verantwortung für alle Bildlaufänderungen übernehmen, die erforderlich sein können, wenn ein Benutzer den Verlauf der App durchläuft. Bei Bedarf können Sie die Scroll-Position verfolgen, wenn Sie History-Einträge mit history.pushState() verschieben.

---

Lesen Sie weiter:

• Bildlaufleiste auf Wikipedia
• Bildlaufleiste (Windows)
• Die Schriftrollenmethode
• Die Bildlaufmethode - Microsoft Dev Network
• iScroll auf Github (referenziert im ersten Abschnitt oben)
• Scrolling und Scrollbars ein Artikel über Benutzerfreundlichkeit von Jakob Nielsen

Beispiele

• Unabhängig scrollende Panels ohne Body Scroll (nur mit CSS) - Ben Frain (10-21-2014)

Answer 3

Satz overflow: hidden; über die body Tag wie diesen:

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

Der obige Code "versteckt" sowohl die horizontalen als auch die vertikalen Bildlaufleisten.

Wenn Sie sich verstecken wollen nur die vertikale Bildlaufleiste verwenden overflow-y :

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

Und wenn Sie sich verstecken wollen nur die horizontale Bildlaufleiste verwenden overflow-x :

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

---

Der Inhalt wird, wenn nötig, beschnitten, um in den Auffüllungsrahmen zu passen. Es sind keine Bildlaufleisten vorgesehen, und es ist keine Unterstützung für einen Bildlauf durch den Benutzer (z. B. durch Ziehen oder Verwenden eines Scrollrads) zulässig. Der Inhalt kann programmatisch gescrollt werden (z. B. durch Setzen des Wertes einer Eigenschaft wie offsetLeft ), also das Element es immer noch ein Rollcontainer . _{( <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#values" rel="nofollow noreferrer">Quelle </a>)}

Answer 4

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 ein beliebiges Element ersetzt werden, dessen Bildlaufleiste Sie ausblenden möchten.

_{<strong>Hinweis </strong>: Ich habe die anderen 19 Antworten überflogen, um zu sehen, ob der Code, den ich schreibe, bereits behandelt wurde, und es scheint, dass keine einzige Antwort die Situation im Jahr 2019 auf den Punkt bringt, obwohl viele von ihnen sehr ausführlich sind. Bitte entschuldigen Sie, wenn dies bereits von jemand anderem gesagt wurde und ich es übersehen habe.}

Answer 5

Sie können dies mit einem Wrapper bewerkstelligen div dessen Überlauf verborgen ist, und die innere div eingestellt auf auto .

Zum Entfernen der inneren div können Sie die Bildlaufleiste aus dem äußeren Bereich herausziehen. div durch Anwendung eines negativen Randes auf den inneren Bereich div . Wenden Sie dann gleiches Padding auf das innere Div an, damit der Inhalt im Blickfeld 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 scrollbar width across the devices that 
     * you are supporting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}