Comment puis-je rendre une barre de défilement verticale visible en permanence en CSS ?

Enquête sur la visibilité permanente de la barre de défilement verticale avec débordement CSS : défilement

Lors de l'implémentation du débordement CSS-y : faites défiler pour contraindre le contenu dans un espace alloué hauteur, il peut être difficile de s'assurer que les utilisateurs remarquent la présence de contenu supplémentaire. Sur macOS, Chrome et Safari masquent la barre de défilement verticale jusqu'à ce que l'utilisateur fasse défiler ou survole activement l'élément. Cela soulève la question de savoir si les utilisateurs reconnaîtront immédiatement qu'un div contient plus de contenu.

Une solution pour forcer l'affichage constant de la barre de défilement

Une solution à ce problème implique d'incorporer 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);
}

Ce CSS remplace le style par défaut des barres de défilement sur les navigateurs macOS. En définissant -webkit-apparence sur none, le style par défaut du navigateur est désactivé. La propriété width spécifie la largeur souhaitée de la barre de défilement et la propriété border-radius ajoute une forme arrondie au pouce de défilement. Les propriétés background-color et box-shadow offrent une apparence personnalisée, améliorant la visibilité de la barre de défilement.

En intégrant ce CSS, la barre de défilement verticale restera visible même lorsque le curseur de la souris ne survole pas le div, garantir que les utilisateurs voient clairement que du contenu supplémentaire est disponible. Cette solution répond au défi posé par le comportement par défaut de macOS et améliore l'expérience utilisateur en fournissant un signal permanent indiquant le contenu défilant.

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!