Comment garantir la visibilité de la barre de défilement sur les navigateurs mobiles ?

Adaptation de la visibilité de la barre de défilement pour les navigateurs mobiles

Lors de la gestion du contenu déroulant sur les pages Web, garantir la visibilité de la barre de défilement sur les appareils mobiles peut être un défi. Malgré l'utilisation de propriétés CSS standard telles que "overflow:auto" ou "overflow:visible", les barres de défilement restent souvent masquées jusqu'à ce que les utilisateurs lancent le défilement.

Pour résoudre ce problème, envisagez de mettre en œuvre les règles CSS suivantes :

::-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;
}

Ces règles exploitent le préfixe "-webkit-", garantissant la compatibilité avec les navigateurs basés sur webkit. Ils personnalisent l'apparence, la taille et la couleur de la barre de défilement, les rendant ainsi plus visibles et plus visibles sur les appareils mobiles.

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!