So verbergen Sie die Bildlaufleiste in CSS3

Die Möglichkeit, die Bildlaufleiste in CSS3 auszublenden, besteht darin, den Pseudoobjektselektor der Bildlaufleiste [::-webkit-scrollbar] anzupassen, z. B. [.element::-webkit-scrollbar { width: 0 !important } ].

Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.

Bei der Arbeit werden wir oft auf diese Situation stoßen, in der wir die Bildlaufleiste ausblenden und das Scrollen unterstützen müssen. Was sollten wir also tun, wenn wir auf diese Situation stoßen? Vielleicht ist die erste Reaktion vieler Leute, das iscroll-Plug-in zu verwenden, aber ich bevorzuge die Verwendung von CSS, um diese Funktion zu erreichen. Werfen wir einen Blick auf die spezifischen Methoden unten.

Methode 1: Berechnen Sie die Breite der Bildlaufleiste und blenden Sie sie aus.

Blenden Sie die Bildlaufleiste einfach aus, indem Sie sie positionieren.

<div class="outer-container">
    <div class="inner-container">
    	......
    </div>
</div>

.outer-container{	
width: 360px;	
height: 200px;	
position: relative;	
overflow: hidden;
}.inner-container{	
position: absolute;	
left: 0;	
top: 0;	
right: -17px;	
bottom: 0;	
overflow-x: hidden;	
overflow-y: scroll;
}

Dieser Code verschiebt geschickt 17 Pixel nach rechts, was genau der Breite der Bildlaufleiste entspricht. Dieser Wert wurde durch manuelles Debuggen ermittelt. Kein Problem in Chrome und IE gefunden.

Methode 2: Umgeben von drei Containern muss die Breite der Bildlaufleiste nicht berechnet werden

Dieser Code wurde erstmals im Microsoft-Blog gesehen. Er ähnelt der obigen Idee, außer dass ein zusätzliches Feld hinzugefügt wird es. Beschränken Sie den Inhalt auf die Box. Auf diese Weise können Sie die Bildlaufleiste nicht sehen und trotzdem scrollen. Der Code lautet wie folgt:

 <div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>

.element, .outer-container {
  width: 200px;
    height: 200px;
}
.outer-container {
  border: 5px solid purple;
    position: relative;
    overflow: hidden;
}.inner-container {  
position: absolute;  
left: 0;  
overflow-x: hidden;  
overflow-y: scroll;
}.inner-container::-webkit-scrollbar {  
display: none;
}

Methode 3: CSS-versteckte Bildlaufleiste

Pseudoobjektselektor für benutzerdefinierte Bildlaufleiste::-webkit-scrollbar.

.element::-webkit-scrollbar { width: 0 !important }

IE 10+

.element { -ms-overflow-style: none; }

Firefox

.element { overflow: -moz-scrollbars-none; }

Kostenloses Teilen von Lernvideos: CSS-Video-Tutorial

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