Affichage des barres de défilement dans les navigateurs mobiles

Cette question se concentre sur le problème des barres de défilement masquées dans les navigateurs mobiles lors de l'utilisation de "overflow:auto" ou " overflow:visible" sur le contenu déroulant. Bien que la barre de défilement soit visible sur les navigateurs de bureau, elle disparaît sur les appareils mobiles à moins d'un défilement actif.

Pour résoudre ce problème, vous pouvez modifier votre CSS pour inclure le code suivant, spécifique au moteur de navigateur Webkit :

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

Ce code définit l'apparence de la barre de défilement, y compris sa largeur, sa hauteur, la couleur du pouce et la couleur de la piste. En personnalisant ces propriétés, vous pouvez rendre la barre de défilement toujours visible sur les appareils mobiles, avant même le défilement.