Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So verbergen Sie die Bildlaufleiste in CSS

青灯夜游
Freigeben: 2023-01-05 16:10:09
Original
50873 Leute haben es durchsucht

Methode: 1. Stellen Sie die Breite der Bildlaufleiste mit der Syntax „scrollbar-width:none;“ ein. 2. Verwenden Sie die Anweisung „-ms-overflow-style:none;“. -scrollbar {display:none}“-Anweisung.

So verbergen Sie die Bildlaufleiste in CSS

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

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 */
Nach dem Login kopieren

IE-Browser

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

-ms-overflow-style: none; /* IE 10+ */
Nach dem Login kopieren

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 */
}
Nach dem Login kopieren

Hinweis: Wenn Sie die Bildlaufleiste ausblenden möchten Bei Bars ist es am besten, die Überlaufanzeige auf „Auto“ oder „Scrollen“ zu stellen, 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;
}
Nach dem Login kopieren

(Teilen von Lernvideos: CSS-Video-Tutorial)

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!