Comment garantir que les barres de défilement sont toujours visibles dans les navigateurs mobiles ?

Comment afficher une barre de défilement dans les navigateurs mobiles

Malgré les propriétés CSS telles que "overflow:auto" et "overflow:visible" révélant des barres de défilement sur Dans les navigateurs de bureau, les navigateurs mobiles les cachent souvent jusqu'au début du défilement. Cet article explique comment rendre les barres de défilement visibles de manière cohérente sur les appareils mobiles, même sans utiliser de bibliothèques jQuery inefficaces.

Considérez le code HTML et CSS suivant :

<div>

#wrapper {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    width: 500px;
    height: 200px;
}

#frameContent {
    width: 100%;
    height: 100%;
}

Pour créer la barre de défilement toujours visible sur les appareils mobiles, ajoutez le 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;
}

Ce code, spécifique au moteur du navigateur WebKit, modifie la barre de défilement apparence, assurant sa visibilité 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!