So verbergen Sie den Bildlauf in CSS

So verbergen Sie den Bildlauf in CSS: 1. In Firefox können Sie die Bildlaufleiste über das Attribut „scrollbar-width: none; /* Firefox */“ ausblenden. 2. Im IE-Browser können Sie „-ms-“ verwenden. Das Attribut „prefix“ definiert den Stil der Bildlaufleiste. 3. In Chrome und Safari können Sie den CSS-Bildlaufleisten-Selektor verwenden und ihn dann über „display:none“ ausblenden.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3-Version, DELL G3-Computer

css Wie verstecke ich den Bildlauf?

Element-Bildlaufleiste mit CSS ausblenden

Wie verstecke ich die Bildlaufleiste, 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 die Attributdefinition -ms-prefix verwenden Scrollbar-Stil:

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

Chrome und Safari

Für Chrome und Safari müssen wir den CSS-Scrollbar-Selektor verwenden und ihn dann mit display:none ausblenden:

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

Hinweis: Wenn Sie ausblenden möchten Wenn Sie die Bildlaufleiste verwenden, stellen Sie die Überlaufanzeige am besten auf „Auto“ oder „Scrollen“, um sicherzustellen, dass der Inhalt scrollbar ist.

Beispiel

Wir verwenden die oben genannten CSS-Eigenschaften und den Überlauf, um das folgende Beispiel zu implementieren – Ausblenden der horizontalen Bildlaufleiste, während die vertikale Bildlaufleiste zugelassen wird:

.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 den Bildlauf in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!