Comment puis-je personnaliser la hauteur d'une barre de défilement en CSS ?

Personnalisation de la hauteur de la barre de défilement

Afin de modifier la hauteur d'une barre de défilement, il est essentiel de comprendre la composition structurelle d'une barre de défilement. Une barre de défilement se compose de plusieurs éléments, notamment :

• Scrollbar Thumb :Représente la zone déplaçable que les utilisateurs manipulent pour faire défiler.
• Scrollbar Track : La zone d'arrière-plan où se déplace le pouce.

Pour obtenir l'effet souhaité montré dans l'image fournie, il est nécessaire de :

1. Définir un point de départ et d'arrivée pour le pouce de la barre de défilement, en veillant à ce qu'il défile uniquement dans une région spécifique.
2. Créez une piste de défilement de remplacement, en remplacement de la piste par défaut.

Voici un exemple d'extrait de code qui montre comment pour ce faire :

<code class="css">.wrapper {
  overflow-y: scroll;
  width: 100%;
  height: 100%;

  /* Create a fake scroll track */
  &::after {
    content: '';
    position: absolute;
    width: 5px;
    height: calc(100% - 20px);
    z-index: -1;
    top: 10px;
    background: #666;
    right: -1px;
  }

  /* Customize the scrollbar properties */
  &::-webkit-scrollbar {
    width: 5px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: red;
    border: none;
    border-radius: 5px;
  }

  /* Define the end and start points of the scrollbar thumb */
  &::-webkit-scrollbar-track-piece:end {
    margin-bottom: 10px;
  }

  &::-webkit-scrollbar-track-piece:start {
    margin-top: 10px;
  }
}</code>

Cet extrait de code crée une barre de défilement personnalisée avec une hauteur de 50 %, comme spécifié dans l'image fournie. Pour ce faire, il ajuste la taille du pouce de la barre de défilement et crée une fausse piste de défilement pour remplacer celle d'origine.

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!