Heim > Artikel > Web-Frontend > So verbergen Sie Bildlaufleisten in CSS
So blenden Sie die Bildlaufleiste aus: Verwenden Sie zunächst den Pseudoklassenselektor „::-webkit-scrollbar“, um die Bildlaufleiste des Elements auszuwählen, und verwenden Sie dann den Stil „display:none;“, um die Bildlaufleiste auszublenden. Das spezifische Syntaxformat ist „::- webkit-scrollbar{display:none;}“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Sie können den Pseudoobjektselektor der benutzerdefinierten Bildlaufleiste::-webkit-scrollbar verwenden, um die ausgeblendete Bildlaufleiste festzulegen.
Verwenden Sie diesen Pseudoklassenselektor, um den CSS-Code der Bildlaufleiste auszublenden:
.element::-webkit-scrollbar {display:none}
Wenn Sie mit anderen PC-Browsern (IE, Firefox usw.) kompatibel sein möchten, können Sie die folgende Methode verwenden. Verschachteln Sie mit overflow:hidden eine weitere Ebene außerhalb des Containers und begrenzen Sie dann die Größe des inneren Inhalts auf die gleiche Größe wie die äußere Verschachtelungsebene, sodass er verdeckt verborgen ist.
<div class="outer-container"> <div class="inner-container"> <div class="content"> ...... </div> </div> </div>
CSS-Code:
.outer-container,.content { width: 200px; height: 200px; } .outer-container { position: relative; overflow: hidden; } .inner-container { position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; } /* for Chrome */ .inner-container::-webkit-scrollbar { display: none; }
Empfohlenes Lernen: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo verbergen Sie Bildlaufleisten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!