Comment rendre les barres de défilement visibles en permanence sur les navigateurs mobiles ?

Activation de la visibilité persistante des barres de défilement sur les navigateurs mobiles

Lors de la présentation de sites Web avec du contenu déroulant, les développeurs sont souvent confrontés au problème des barres de défilement masquées sur les appareils mobiles. Bien que les barres de défilement soient facilement visibles sur les navigateurs de bureau, elles ont tendance à être masquées sur les navigateurs mobiles jusqu'à ce que le défilement soit lancé. Cela peut entraîner des problèmes d'utilisabilité.

Une approche pour résoudre ce problème consiste à utiliser un style personnalisé avec CSS. En appliquant des règles CSS spécifiques, il est possible de rendre les barres de défilement visibles de manière cohérente sur les navigateurs mobiles.

Considérez le code CSS suivant :

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

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

En ajoutant ce code CSS à votre feuille de style, vous pouvez :

• Désactivez les styles de barre de défilement par défaut du navigateur (-webkit-apparence : aucun ;)
• Définissez des dimensions personnalisées pour les barres de défilement verticales et horizontales (largeur et hauteur)
• Personnalisez l'apparence du pouce de la barre de défilement (couleur d'arrière-plan, rayon de bordure et bordure)
• Spécifiez le style de la piste de la barre de défilement (border-radius et background-color)

Application de ce CSS le code rendra les barres de défilement visibles de manière persistante sur les appareils mobiles, offrant ainsi une expérience utilisateur plus intuitive.

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!