Comment définir la largeur de la barre de défilement en CSS

Vous pouvez utiliser le sélecteur "::-webkit-scrollbar" et l'attribut width pour définir la largeur de la barre de défilement en CSS. La syntaxe est "::-webkit-scrollbar{width: width value;}. "; ce sélecteur utilise Pour sélectionner la barre de défilement entière, l'attribut width est utilisé pour définir la largeur de l'élément sélectionné.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur thinkpad t480.

L'idée de la méthode est la suivante :

Utilisez le sélecteur de pseudo-classe ::-webkit-scrollbar en CSS pour définir le style de la barre de défilement et définissez la barre de défilement via l'attribut width dans cette largeur de sélecteur de pseudo-classe.

::-webkit-scrollbar Le sélecteur de pseudo-classe CSS affecte le style de la barre de défilement d'un élément.

Vous pouvez utiliser les sélecteurs de pseudo-éléments suivants pour modifier le style de la barre de défilement de divers navigateurs Webkit :

::-webkit-scrollbar — la barre de défilement entière

 : : -webkit-scrollbar-button — Boutons (flèches haut et bas) sur la barre de défilement

::-webkit-scrollbar-thumb — Curseur de défilement sur la barre de défilement

::-webkit -scrollbar -track — Piste de la barre de défilement

::-webkit-scrollbar-track-piece — La partie piste de la barre de défilement sans curseur

::-webkit-scrollbar-corner — Quand il y a aussi une verticale L'intersection de la barre de défilement et de la barre de défilement horizontale

::-webkit-resizer — styles partiels de la partie de coin de certains éléments (par exemple : boutons déplaçables de la zone de texte)

Code d'implémentation :

.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;  
  height: 2em;
  }
  .invisible-scrollbar::-webkit-scrollbar {
  display: none;
  }
  /* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
 .mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;  
  height: 8px;  
  background-color: #aaa; 
  /* or add it to the track */}/* Add a thumb */
  .mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000; 
    }

Recommandations associées : Tutoriel 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!