So passen Sie den Stil der Bildlaufleiste in CSS3 an-CSS-Tutorial-php.cn

So passen Sie den Stil der Bildlaufleiste in CSS3 an

清浅

Freigeben： 2021-04-20 15:09:06

Original

6424 Leute haben es durchsucht

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.

So passen Sie den Stil der Bildlaufleiste in CSS3 an

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>

Nach dem Login kopieren

[Empfohlener Kurs:

CSS3-Tutorial] Rendering:

So passen Sie den Stil der Bildlaufleiste in CSS3 an

scrollbar-Attribut:

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;

Nach dem Login kopieren

Rendering:

So passen Sie den Stil der Bildlaufleiste in CSS3 an

Benutzerdefinierter Bildlaufleistenstil:

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

Nach dem Login kopieren

Rendering:

Image 3.jpg 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!