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!
