So verstecken Sie den Schieberegler in CSS

Die Möglichkeit, den Schieberegler in CSS auszublenden, besteht darin, [overflow:hidden] festzulegen. Wenn wir die Bildlaufleiste ausblenden und anzeigen möchten, wenn der Inhalt überläuft, müssen wir nur [overflow:auto] festlegen.

Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.

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 Bildlaufleistenstil zu definieren:

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

Chrome und Safari-Browser

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

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

Hinweis: Wenn Sie die Bildlaufleiste ausblenden möchten, ist es besser, die Überlaufanzeige auf „Auto“ zu setzen scroll stellt sicher, 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;
}

Verwandte Videofreigabe: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo verstecken Sie den Schieberegler in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!