So ändern Sie den Stil der Browser-Bildlaufleiste mithilfe von CSS

Hinweis: Diese Methode gilt nur für den -Webkit-Kernel-Browser

Das Erscheinungsbild der Bildlaufleiste besteht aus zwei Teilen:

1 Bildlaufleiste Gleitschiene

2. Bildlaufleiste Schieber in Gleitschiene

In CSS besteht die Bildlaufleiste aus 3 Teilen

name::-webkit-scrollbar //滚动条整体样式

name::-webkit-scrollbar-track //滚动条滑轨

name::-webkit-scrollbar-thumb //滚动条内部滑块

Hinweis: Die oben genannten 3 sind Pseudoklassen , bitte ändern Sie den Namen in den Namen des Elements, das geändert werden muss

(empfohlenes zugehöriges Video-Tutorial: CSS-Video-Tutorial )

Zum Beispiel: Ändern Sie die Schriftrolle Balkenstil der gesamten Seite

body::-webkit-scrollbar{ //先改变body的滚动条宽度

width: 8px;

}

body::-webkit-scrollbar-track{//再改变body的滚动条轨道颜色

background: rgb(200, 200, 200);

border-radius: 5px;

}

body::-webkit-scrollbar-thumb{//最后改变body的滚动条滑轨相关的样式

background: rgb(120, 120, 120);

border-radius: 5px;

}

Sie können dem Stil Hintergrund, Transparenz, Rahmen, abgerundete Ecken und andere Attribute hinzufügen, um den Browser schöner zu machen.

Empfohlenes Tutorial: Schnellstart mit CSS

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