Comment changer le style de la barre de défilement du navigateur à l'aide de CSS

Remarque : Cette méthode s'applique uniquement au navigateur du noyau -webkit-

L'apparence de la barre de défilement se compose de deux parties :

1. barre de défilement Rail coulissant

2. Barre de défilement Curseur dans le rail coulissant

En CSS, la barre de défilement se compose de 3 parties

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

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

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

Remarque : les 3 ci-dessus sont des pseudo-classes , veuillez remplacer le nom par le nom de l'élément qui doit être modifié

(tutoriel vidéo associé recommandé : tutoriel vidéo CSS )

Par exemple : modifier le défilement style de barre de toute la page

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;

}

Vous pouvez ajouter un arrière-plan, de la transparence, des bordures, des coins arrondis et d'autres attributs au style pour rendre le navigateur plus beau.

Tutoriel recommandé : Démarrage rapide avec CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!