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!
