Maison >interface Web >tutoriel CSS >Comment rendre les barres de défilement visibles en permanence 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 :
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!