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

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

Susan Sarandon

Libérer： 2024-10-28 16:18:02

original

940 Les gens l'ont consulté

How can I customize the height of a scrollbar using CSS and 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>

Copier après la connexion

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>

Copier après la connexion

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!