Comment appliquer CSS uniquement sur la barre de défilement horizontale

Question

Je suis un nouveau stagiaire et ils m'ont confié une tâche simple : personnaliser la barre de défilement horizontale

J'ai ce code mais la barre de défilement verticale disparaît... J'en ai besoin par défaut dans la direction verticale... seule la barre de défilement horizontale doit être personnalisée.

::-webkit-scrollbar {
    width: 7px;
  }
::-webkit-scrollbar-thumb:horizontal {
   border-radius: 8px;
   background-color: rgba(92, 92, 92, 0.5);
  }

Si je mets le code ci-dessous au milieu, la barre de défilement verticale est également personnalisée... je ne peux donc que la personnaliser ou la masquer du tout... et je ne peux pas faire ça

::-webkit-scrollbar-thumb {                             
-webkit-appearance: none;
}

Answer 1

Voici un exemple sur la façon de styliser uniquement la barre de défilement horizontale :

https://codepen.io/lmmm/pen/abKeEJw

Vous pouvez utiliser les éléments que vous souhaitez styliser et utiliser vos règles selon vos besoins :

    horizontal text that overflows

#horizontal::-webkit-scrollbar {
  width: 7px;
}
#horizontal::-webkit-scrollbar-thumb:horizontal {
  border-radius: 15px;
  background-color: tomato;
}

Answer 2

Vous devez lier le pseudo décorateur au div pour appliquer le style. Cela signifie que le pouce vertical provient de la balise body ou HTML. Les pouces horizontaux sont destinés aux divs internes.

#bars-chart-container::-webkit-scrollbar {
  width: 7px;
}
#bars-chart-container
::-webkit-scrollbar-thumb:horizontal {
  border-radius: 8px;
  background-color: rgba(92, 92, 92, 0.5);
}

Cela n'empêchera probablement pas le pouce vertical du div interne de disparaître, mais jusqu'à présent, je vois dans vos images que vous n'avez pas besoin de montrer cela. Je ne pense pas que cela puisse être réalisé autrement.