So zeigen Sie eine Bildlaufleiste über CSS hinaus an

So verwenden Sie CSS über die Anzeige von Bildlaufleisten hinaus: 1. Verwenden Sie drei Container, um es zu umgeben, und es ist nicht erforderlich, die Breite der Bildlaufleiste zu berechnen. 2. Pseudoobjektselektor für benutzerdefinierte Bildlaufleiste [::webkit-scrollbar].

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.

Css-Methode, die über die Anzeige von Bildlaufleisten hinausgeht:

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

Diese Methode fügt im Vergleich zu Methode 1 ein zusätzliches Feld hinzu , wodurch der Inhalt auf „Innerhalb des Felds“ beschränkt wird, können Sie scrollen, ohne die Bildlaufleiste zu sehen.

 <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 2: Passen Sie den Pseudoobjektselektor der Bildlaufleiste an::webkit-scrollbar

Diese Methode ist nicht mit IE kompatibel und kann für mobile Anwendungen verwendet werden.

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

Details:

　Das Folgende ist der benutzerdefinierte Webkit-Bildlaufleistenstil

Bei Verwendung der neuesten Version des Google Chrome-Browsers ist der Bildlaufleistenstil bereits sehr schön. Diese Webkit-Bildlaufleiste funktioniert nur mit Webkit Core.

Webkit-Eigenschaften

::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }

Verwandte Tutorial-Empfehlungen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo zeigen Sie eine Bildlaufleiste über CSS hinaus an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!