So ändern Sie mit CSS den Stil der Browser-Bildlaufleiste (detailliertes Beispiel)

Mit der Entwicklung des Internets haben die Menschen immer höhere Anforderungen an Seiten, die nicht nur einfach zu bedienen, sondern auch gut aussehen. Front-End-Entwicklern sind Browser-Bildlaufleisten nicht fremd, wenn einige der integrierten Bildlaufleisten unserem ästhetischen Anspruch nicht genügen, wissen Sie dann, wie man mit CSS den Stil von Browser-Bildlaufleisten ändert? Heute werde ich Ihnen vorstellen, wie Sie den Div-Bildlaufleistenstil festlegen . Freunde in Not können sich darauf berufen.

Bevor wir den Stil der Bildlaufleiste anpassen, müssen wir zunächst die Struktur der Bildlaufleiste verstehen. Im Allgemeinen besteht die Bildlaufleiste aus zwei Teilen: Ein Teil ist der Schiebeteil, den wir Schieberegler nennen, und der andere Teil ist die Spur der Bildlaufleiste, die im Allgemeinen die Spur des Schiebereglers ist Aussehen, die Farbe des Schiebereglers ist dunkler als die Spur.

Stellen Sie zunächst die CSS-Codes für Bildlaufleisten und ihre Bedeutung vor

::-webkit-scrollbar: bezieht sich auf den gesamten Teil der Bildlaufleiste. Zu seinen Attributen gehören Breite, Höhe, Hintergrund, usw.
::-webkit-scrollbar-button: bezieht sich auf die Schaltflächen auf beiden Seiten der Bildlaufleiste. Sie können display:none verwenden, um es auszublenden, wenn Sie es nicht benötigen.
::-webkit-scrollbar-track: bezieht sich auf den äußeren Track-Teil um es auszublenden. Sie können auch hinzufügen, was Sie möchten. Farbe
::-webkit-scrollbar-track-piece: bezieht sich auf den inneren Teil der Bildlaufleiste, also auf den mittleren Teil der Bildlaufleiste
::- webkit-scrollbar-thumb: bezieht sich auf den ziehbaren Teil der Bildlaufleiste, außerdem ist es der Schieberegler
::-webkit-scrollbar-corner: bezieht sich auf den Eckteil
::-webkit-resizer: er wird verwendet um den Stil des Schiebereglers in der unteren rechten Ecke zu definieren

, am häufigsten wird er jedoch verwendet. Die Bildlaufleiste besteht aus drei Teilen: dem Gesamtteil (-webkit-scrollbar) und dem Schieberegler (-webkit-scrollbar-thumb ) und die äußere Spur (-webkit-scrollbar-track).

Als nächstes verstecken wir den überschüssigen Teil im Div-Feld, stellen den Bildlaufleistenstil auf das Div ein und sehen, wie wir CSS verwenden, um den Bildlaufleistenstil zu implementieren.

HTML-Teil:

<div class="scroll">
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>    
    </div>

CSS-Teil:

.scroll{
            margin:100px auto;
            border: 1px solid #000; 
            width: 200px;
            height: 300px;
            overflow: auto;
        }
        .scroll::-webkit-scrollbar {
            width: 10px;
           height: 10px;
        }
        /*正常情况下滑块的样式*/
        .scroll::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,.05);
            border-radius: 10px;
            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
        }
        /*鼠标悬浮在该类指向的控件上时滑块的样式*/
        .scroll:hover::-webkit-scrollbar-thumb {
           background-color: rgba(0,0,0,.2);
            border-radius: 10px;
            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
        }
        /*鼠标悬浮在滑块上时滑块的样式*/
        .scroll::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0,0,0,.4);
            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
        }
        /*正常时候的主干部分*/
        .scroll::-webkit-scrollbar-track {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
           background-color: white;
        }
        /*鼠标悬浮在滚动条上的主干部分*/
        .scroll::-webkit-scrollbar-track:hover {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.4);
            background-color: rgba(0,0,0,.01);
        }

Rendering:

Hinweis: Wenn Wenn Wenn es sich um eine horizontale Bildlaufleiste handelt, funktioniert das Attribut „Breite“ nicht und die Höhe kann die Höhe der Bildlaufleiste festlegen. Wenn es sich um eine vertikale Bildlaufleiste handelt, funktioniert die Höhe nicht und die Breite kann zum Festlegen verwendet werden Breite der Bildlaufleiste. Sie können den gewünschten Stil entsprechend Ihren Bedürfnissen bei der Arbeit einstellen. Freunde, die noch nicht damit interagiert haben, können es mehr ausprobieren und ihr Verständnis für Wissenspunkte vertiefen.

Das obige ist der detaillierte Inhalt vonSo ändern Sie mit CSS den Stil der Browser-Bildlaufleiste (detailliertes Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!