So verbergen Sie die Bildlaufleiste in Div-CSS

So blenden Sie die Bildlaufleiste mit Div-CSS aus: 1. Berechnen Sie die Breite der Bildlaufleiste und blenden Sie sie aus. 2. Umgeben Sie sie mit drei Containern, ohne die Breite der Bildlaufleiste zu berechnen. 3. Passen Sie die Pseudoobjektauswahl an der Bildlaufleiste" ::-webkit-scrollbar".

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

3 Möglichkeiten, CSS zu implementieren, um Bildlaufleisten auszublenden und den Bildlauf zu unterstützen. In der Frontend-Entwicklung kommt es häufig vor, dass wir uns diese Situation vorstellen können Aber tatsächlich kann CSS diese Funktion jetzt auch an vielen Stellen implementieren.

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

In der Seitenleiste dieser Website können Sie sehen, dass der Inhalt des Front-End-Tagesberichts keine Bildlaufleiste hat, Sie können jedoch durch den Inhalt scrollen indem Sie die Maus nach oben bewegen. Welche Technologie ist das? Tatsächlich verstecke ich die Bildlaufleiste einfach durch Positionierung. Demonstration Nachfolgend finden Sie eine vereinfachte Version des Codes

<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;
}

Demonstration 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: Bildlaufleisten mit CSS ausblenden

Gleichzeitig wurde im Artikel auch eine Methode zum Ausblenden von Bildlaufleisten über CSS vorgestellt, diese Methode ist jedoch nicht mit IE kompatibel und kann verwendet werden mobile Geräte. Das ist der Pseudoobjektselektor der benutzerdefinierten Bildlaufleiste::-webkit-scrollbar. Weitere Informationen finden Sie im vorherigen Artikel: CSS3 benutzerdefinierter Webkit-Bildlaufleistenstil Chrome und Safari

.element::-webkit-scrollbar { width: 0 !important }
IE 10+
.element { -ms-overflow-style: none; }
Firefox
.element { overflow: -moz-scrollbars-none; }

Für detailliertere HTML/CSS-Kenntnisse besuchen Sie bitte

CSS-Video-Tutorial

Kolumne!

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