Comment forcer une barre de défilement verticale à toujours apparaître en CSS ?

Comment toujours afficher la barre de défilement verticale en CSS

Dans certains scénarios, vous souhaiterez peut-être vous assurer qu'une barre de défilement verticale est toujours visible , même lorsque le contenu d'un div ne s'étend pas au-delà de la zone visible. Par défaut, les navigateurs masquent les barres de défilement jusqu'à ce que la souris survole un élément.

Pour forcer une barre de défilement à toujours s'afficher, ajoutez le CSS suivant :

:::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

La première ligne supprime le style par défaut du navigateur et la deuxième ligne définit un style personnalisé pour le pouce de la barre de défilement.

Par exemple :

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
  
  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
  }
}

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!