Heim >Web-Frontend >CSS-Tutorial >So passen Sie den Stil der Bildlaufleiste in CSS3 an
So passen Sie den Stil der Bildlaufleiste in CSS3 an
- 清浅Original
- 2018-12-08 10:45:036430Durchsuche
So passen Sie den Bildlaufleistenstil in CSS3 an: Erstellen Sie zunächst eine HTML-Beispieldatei, und erstellen Sie dann eine Bildlaufleiste, indem Sie „overflow: scroll“ für das Element festlegen Das Scrollbar-Attribut „Balkenstil“ reicht aus.
Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer.
In CSS3 können Sie eine Bildlaufleiste generieren, indem Sie overflow:scroll auf das Element festlegen und dann den Stil der Bildlaufleiste neu anpassen, indem Sie jeden Wert im Bildlaufleistenattribut
Scroll festlegen Leisten sind ein Muss in Browsern. Unverzichtbar, normalerweise ist eine Website mit einzigartigen Bildlaufleisten auffälliger und lässt die Website anders aussehen. Wir können das jQuery-Plug-in verwenden, um benutzerdefinierte Bildlaufleisten zu implementieren. Wir können auch CSS3 verwenden, um unsere eigenen Bildlaufleisten zu erstellen. Im folgenden Artikel stellen wir detailliert vor, wie man CSS3 zum Erstellen benutzerdefinierter Bildlaufleisten verwendet >
Überlaufattribut:Wird hauptsächlich zum Festlegen des Stils verwendet, wenn der Inhalt überläuft (ob Bildlaufleisten über das Limit hinaus angezeigt werden sollen).
overflow-x: Einstellungen, wenn der Inhalt überläuft horizontale Richtung
Überlauf- y: Einstellungen, wenn vertikaler Inhalt überläuft
Die Werte der drei Attributeinstellungen sind: sichtbar (Standardwert), scrollen, ausgeblendet, automatisch.
Standardstil der Bildlaufleiste:
<style type="text/css">
.scrollbar {
background-color: #F5F5F5;
height: 300px;
width: 65px;
margin: 100px auto;
overflow-y: scroll;//设置滚动条
}
.overflow {
height: 450px;
}
</style>
</head>
<body>
<div class="scrollbar" id="style-1">
<div class="overflow"></div>
</div>[Empfohlener Kurs:
scrollbar-face-color: Die Farbe des hervorstehenden Teils der dreidimensionalen Bildlaufleiste
scrollbar-arrow- color Die Farbe der dreieckigen Pfeile auf den Auf- und Ab-Schaltflächen
scrollbar-highlight-color: Die Farbe des leeren Teils der Bildlaufleiste
scrollbar- Schattenfarbe: Die Farbe des dreidimensionalen Bildlaufleistenrahmens
Hinweis: Diese Attribute werden nur im IE-Browser unterstützt
Beispiel:
scrollbar-face-color:pink;
Rendering:
-webkit-scrollbar: der gesamte Teil der Bildlaufleiste
-webkit-scrollbar-button : Schaltflächen an beiden Enden der Bildlaufleiste-webkit-scrollbar-track: Spur außerhalb der Ebene
-webkit-scrollbar-track-piece: Innere Spur, mittlerer Teil der Bildlaufleiste (entfernt)
- webkit-scrollbar-thumb: Drag-Leiste
-webkit-scrollbar-corner: Ecke
-webkit-resizer: Definieren Sie den Stil des Drag-Blocks in der unteren rechten Ecke
Beispiel:
<style type="text/css">
.scrollbar {
background-color: #F5F5F5;
height: 300px;
width: 65px;
margin: 100px auto;
overflow-y: scroll;
}
.overflow {
height: 450px;
}
/*滚动条区域*/
#demo::-webkit-scrollbar{
width:20px;
background-color:#fff;
}
/*滚动条*/
#demo::-webkit-scrollbar-thumb{
background-color:#f196c4b3;
}
/*滚动条外层轨道*/
#demo::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 1px ;
background-color:pink;
border-radius: 10px;
}
</style>
}
</head>
<body>
<div class="scrollbar" id="demo">
<div class="overflow"></div>
</div>
</body>Rendering:
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass jeder durch diesen Artikel lernen kann, wie man eine benutzerdefinierte Bildlaufleiste erstellt .
Das obige ist der detaillierte Inhalt vonSo passen Sie den Stil der Bildlaufleiste in CSS3 an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!