Comment créer une barre de défilement personnalisée avec une hauteur réduite dans le développement Web ?

Comment ajuster la hauteur de la barre de défilement

Dans ce cas, nous discutons de la personnalisation de l'apparence des barres de défilement, notamment en ajustant leur hauteur. Pour ce faire, nous devrons comprendre la structure d'une barre de défilement, illustrée ci-dessous :

<code class="css">::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }</code>

L'objectif est double : modifier l'endroit où le pouce de la barre de défilement (5) commence et termine le défilement, et pour créer une piste de défilement artificielle à la place de la piste existante (3). En utilisant CSS, ces modifications peuvent être implémentées comme suit :

<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 fausse barre de défilement qui apparaît plus courte que la barre de défilement réelle, donnant l'illusion d'un ajustement en hauteur. L'élément ::-webkit-scrollbar-track est utilisé pour masquer la barre de défilement d'origine, tandis que le pseudo-élément ::after crée la fausse barre de défilement. L'élément ::-webkit-scrollbar-thumb est conçu pour ressembler à un pouce de barre de défilement plus court. En ajustant les propriétés margin-top et margin-bottom des éléments ::-webkit-scrollbar-track-piece, les points de début et de fin du pouce de la barre de défilement peuvent être modifiés.

Ce code raccourcira efficacement la apparence de la barre de défilement, offrant une expérience visuelle personnalisée.

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!