Heim >Web-Frontend >CSS-Tutorial >So stellen Sie sicher, dass die Bildlaufleiste in CSS nicht angezeigt wird
So stellen Sie sicher, dass die Bildlaufleiste in CSS nicht angezeigt wird
- 醉折花枝作酒筹Original
- 2021-06-01 16:22:1714467Durchsuche
In CSS können Sie den Pseudoklassenselektor „::-webkit-scrollbar“ verwenden, um die Bildlaufleiste auszuwählen, und dann den Stil „display:none“ verwenden, um die Bildlaufleiste nicht anzuzeigen. Das spezifische Syntaxformat lautet „; ::-webkit-scrollbar {display:none;}".
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
::-webkit-scrollbar Der CSS-Pseudoklassenselektor beeinflusst den Stil der Bildlaufleiste eines Elements. Wir können die Anzeigeeigenschaft des ::-webkit-scrollbar-Selektors auf „none“ setzen, um die Bildlaufleiste auszublenden.
So stellen Sie ein, dass die Bildlaufleiste nicht angezeigt wird:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style=" width:200px; height: 200px; overflow-y: scroll;">
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
</div>
</body>
</html>Rendering:
Vor dem Festlegen des CSS-Effekts:
Nach dem Hinzufügen des CSS-Stils:
Code
<style>
::-webkit-scrollbar {display:none}
</style>Verwenden Sie CSS, um die Bildlaufleiste nicht anzuzeigen um den Effekt anzuzeigen:
CSS-Bildlaufleistenauswahl:
::-webkit-scrollbar – die gesamte Bildlaufleiste
::-webkit-scrollbar-button – die Schaltfläche auf der Bildlaufleiste (nach oben und unten). Pfeile)
: :-webkit-scrollbar-thumb – Bildlaufleiste auf Scroll-Schieberegler
::-webkit-scrollbar-track – Bildlaufleistenspur
::-webkit-scrollbar-track-piece – Bildlaufleiste verschiebt sich nicht Der Spurteil des Blocks
::-webkit-scrollbar-corner – Der Teil, der zusammentrifft, wenn sowohl vertikale als auch horizontale Bildlaufleisten vorhanden sind
::-webkit-resizer – Der Teil des Eckteils bestimmter Elemente Stil (Beispiel: ziehbare Schaltfläche des Textbereichs)
Empfohlenes Lernen: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo stellen Sie sicher, dass die Bildlaufleiste in CSS nicht angezeigt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!