CSS-Beispielcode zum Festlegen des Bildlaufleistenstils

In diesem Artikel wird hauptsächlich der Beispielcode für die CSS-Einstellung des Bildlaufleistenstils vorgestellt. Er ist sehr gut und hat einen gewissen Referenzwert.

Der Implementierungscode für die CSS-Einstellung des Bildlaufleistenstils ist wie folgt Anzeige:

•::-webkit-scrollbar Der gesamte Teil der Bildlaufleiste
•::-webkit-scrollbar-thumb Das kleine Quadrat innerhalb der Bildlaufleiste kann nach oben und unten verschoben werden ( oder links und rechts) , je nachdem, ob es sich um eine vertikale oder eine horizontale Bildlaufleiste handelt)
•::-webkit-scrollbar-track Die Spur der Bildlaufleiste (mit Daumen innen)
•:: -webkit-scrollbar-button Die Spur der Bildlaufleiste. Mit den Schaltflächen an beiden Enden kann die Position der kleinen Quadrate durch Anklicken feinjustiert werden.
•::-webkit-scrollbar-track-piece Die innere Spur, der mittlere Teil der Bildlaufleiste (entfernt)
•::-webkit-scrollbar-corner Die Ecke, also der Schnittpunkt der zwei Bildlaufleisten
•::-webkit-resizer Ein kleines Steuerelement am Schnittpunkt zweier Bildlaufleisten zum Ändern der Größe von Elementen durch Ziehen

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
    width: 16px;
    height: 16px;
    background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

Details: Wenn Sie

zum Definieren der Bildlaufleiste festlegen, werden Pseudoelemente und Pseudoklassen verwendet. Was sind also Pseudoelemente und Pseudoklassen?

Jeder sollte mit den Pseudoklassen vertraut sein: link, :focus, :hover Darüber hinaus wurden viele Pseudoklassenselektoren zu CSS3 hinzugefügt, wie zum Beispiel :nth-child, :last-child, :nth-last-of -type() usw.

Sie haben die Pseudoelemente in CSS schon einmal gesehen: :first-line, :first-letter, :before, :after. Dann wurde in CSS3 das Pseudoelement angepasst und ein „:“ zum vorherigen hinzugefügt, das nun zu „::first-letter,::first-line,::before,::after“ wird. Darüber hinaus fügt CSS3 auch eine „::selection“ hinzu. Zwei „::“ und ein „:“ werden in CSS3 hauptsächlich zur Unterscheidung von Pseudoklassen und Pseudoelementen verwendet.

Webkits Implementierung von Pseudoklassen und Pseudoelementen ist sehr stark. Die Bildlaufleiste kann als Seitenelement definiert und mit einigen erweiterten CSS3-Attributen wie Farbverläufen, abgerundeten Ecken, RGBa usw. kombiniert werden. Wenn Sie dann an einigen Stellen Bilder verwenden müssen, können Sie die Bilder auch in Base64 konvertieren, andernfalls müssen Sie jedes Mal mehrere Bilder laden und die Anzahl der Anfragen erhöhen.

Jedes Objekt kann eingestellt werden: Ränder, Schatten, Hintergrundbilder usw. Die erstellte Bildlaufleiste vervollständigt weiterhin ihr interaktives Verhalten gemäß den Einstellungen des Betriebssystems selbst. Die folgenden Pseudoklassen können auf die oben genannten Pseudoelemente angewendet werden. Es ist etwas kompliziert, Einzelheiten zum Schreiben zu erfahren. Dort gibt es auch Kommentare.

:horizontal
//horizontal伪类适用于任何水平方向上的滚动条
:vertical
//vertical伪类适用于任何垂直方向的滚动条
:decrement
//decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮
:increment
//increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮
:start
//start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面
:end
//end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面
:double-button
//double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
:single-button
//single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
:no-button
no-button伪类表示轨道结束的位置没有按钮。
:corner-present
//corner-present伪类表示滚动条的角落是否存在。
:window-inactive
//适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。
::-webkit-scrollbar-track-piece:start {
/*滚动条上半边或左半边*/
}
::-webkit-scrollbar-thumb:window-inactive {
/*当焦点不在当前区域滑块的状态*/
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/*当鼠标在水平滚动条下面的按钮上的状态*/
}

Das obige ist der detaillierte Inhalt vonCSS-Beispielcode zum Festlegen des Bildlaufleistenstils. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!