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!