So verbergen Sie die Bildlaufleiste im HTML-CSS

So blenden Sie die Bildlaufleiste in HTML-CSS aus: 1. Für Firefox verstecken Sie sie mit „scrollbar-width: none;“; 2. Für IE verstecken Sie sie mit „-ms-overflow-style: none;“

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Wie verstecke ich Bildlaufleisten in HTML-CSS?

Element-Bildlaufleisten mit CSS ausblenden

Wie verstecke ich Bildlaufleisten, während ich weiterhin auf jedem Element scrollen kann?

Wenn Sie die Bildlaufleiste ausblenden und anzeigen möchten, wenn der Inhalt überläuft, müssen Sie zunächst nur den Stil „Überlauf: Auto“ festlegen. Wenn Sie die Bildlaufleiste vollständig ausblenden möchten, setzen Sie einfach overflow:hidden. Dies führt jedoch dazu, dass der Elementinhalt nicht scrollbar ist. Derzeit gibt es keine CSS-Regel, die es einem Element ermöglicht, die Bildlaufleiste auszublenden, während weiterhin durch den Inhalt gescrollt wird. Dies kann nur durch Festlegen des Bildlaufleistenstils für einen bestimmten Browser erreicht werden.

Firefox-Browser

Für Firefox können wir die Breite der Bildlaufleiste auf „Keine“ setzen:

scrollbar-width: none; /* Firefox */

IE-Browser

Für IE müssen wir das Attribut -ms-prefix verwenden, um den Stil der Bildlaufleiste zu definieren:

-ms-overflow-style: none; /* IE 10+ */

Chrome und Safari

Für Chrome und Safari müssen wir die CSS-Bildlaufleistenauswahl verwenden und sie dann mit display:none ausblenden:

::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

Hinweis: Am besten ist es, wenn Sie die Bildlaufleiste ausblenden möchten. Stellen Sie die Überlaufanzeige auf ein Auto oder Scroll, um sicherzustellen, dass der Inhalt scrollbar ist.

Beispiel

Wir verwenden die oben genannten CSS-Eigenschaften und den Überlauf, um das folgende Beispiel zu implementieren – das Ausblenden der horizontalen Bildlaufleiste und das Zulassen der vertikalen Bildlaufleiste:

.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

Empfohlenes Lernen: „CSS-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonSo verbergen Sie die Bildlaufleiste im HTML-CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!