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

Personnalisation de la hauteur de la barre de défilement

Contrôle de la taille de la barre de défilement

Pour modifier la hauteur de la barre de défilement, il est nécessaire de comprendre sa structure . Référencez l'image ci-dessous pour visualiser les composants de la barre de défilement :

[Image de la structure de la barre de défilement]

Pour modifier la taille, nous allons nous concentrer sur deux aspects :

• Contrôler où le pouce de la barre de défilement (5) commence et arrête le défilement
• Simuler une fausse piste de défilement au lieu d'utiliser celle par défaut (3)

Créer une barre de défilement personnalisée

Considérez le code suivant :

CSS :

<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>

HTML :

<code class="html"><div class="page">
  <div class="wrapper">
    <div class="content">
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
    </div>
  </div>
</div></code>

Ce code :

• Définit une fausse piste de défilement à l'aide du pseudo-élément after de l'élément de page.
• Personnalise la largeur, l'arrière-plan et la couleur du pouce de la barre de défilement à l'aide des propriétés CSS appliquées à la barre de défilement de l'élément wrapper.
• Ajoute des marges aux éléments de piste de la barre de défilement pour contrôler les points de début et de fin du pouce de défilement.

En implémentant ces modifications, vous pouvez modifier la hauteur de la barre de défilement pour répondre à vos exigences de conception.

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!