Comment puis-je personnaliser la hauteur de la barre de défilement en CSS pour créer une page Web visuellement attrayante et fonctionnelle ?

Personnalisation de la hauteur de la barre de défilement

Contrôler la hauteur des barres de défilement est une technique utile pour améliorer l'attrait visuel et la fonctionnalité des pages Web. Cet article explore une méthode permettant de personnaliser la hauteur de la barre de défilement pour qu'elle ressemble à l'exemple fourni dans l'image.

Comprendre la structure de la barre de défilement

Tout d'abord, il est essentiel de comprendre la structure d'une barre de défilement. . Il se compose de plusieurs éléments :

1. Barre de défilement : Le conteneur principal de la barre de défilement.
2. Bouton de la barre de défilement : Les flèches en haut et en bas.
3. Piste de la barre de défilement : L'espace vertical ou horizontal dans lequel le pouce de la barre de défilement se déplace.
4. Pièce de la piste de la barre de défilement : Segments de la barre de défilement track.
5. Pouce de la barre de défilement : L'élément mobile qui indique la position dans le contenu.
6. Coin de la barre de défilement : L'intersection de la barre de défilement et de la barre de défilement. track.
7. Resizer : Un élément facultatif qui permet de redimensionner la barre de défilement.

Ajustement de la hauteur de la barre de défilement

Pour obtenir la hauteur de barre de défilement souhaitée, vous devez :

1. Définir les points de début et de fin du pouce de la barre de défilement. Cela détermine où le pouce commence et arrête le défilement.
2. Simulez une piste de défilement. Une piste de défilement donne l'illusion d'une piste continue même si la piste réelle est divisée en deux morceaux.

Implémentation du code

L'extrait de code suivant montre comment mettre en œuvre ces ajustements :

<code class="css">.page {
  position: relative;
  width: 100px;
  height: 200px;
}

.content {
  width: 100%;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px solid #ddd;
}

.page::after {
  content: '';
  position: absolute;
  z-index: -1;
  height: calc(100% - 20px);
  top: 10px;
  right: -1px;
  width: 5px;
  background: #666;
}

.wrapper::-webkit-scrollbar {
  display: block;
  width: 5px;
}

.wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.wrapper::-webkit-scrollbar-thumb {
  background-color: red;
  border-right: none;
  border-left: none;
}

.wrapper::-webkit-scrollbar-track-piece:end {
  background: transparent;
  margin-bottom: 10px;
}

.wrapper::-webkit-scrollbar-track-piece:start {
  background: transparent;
  margin-top: 10px;
}</code>

Ce code crée une barre de défilement qui a une hauteur de 5 px et semble avoir une piste continue. La piste simulée est créée à l'aide du pseudo-élément ::after, tandis que la largeur et l'arrière-plan de la piste sont ajustés à l'aide des propriétés 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!