Comment puis-je rendre les barres de défilement visibles dans les navigateurs mobiles ?

Rendre les barres de défilement visibles sur les navigateurs mobiles

Dans le développement Web, il est souvent souhaitable d'avoir des barres de défilement visibles dans les navigateurs mobiles même lorsque le contenu n'est pas visible. initialement défilé. Alors que les propriétés CSS telles que "overflow:auto" ou "overflow:visible" permettent d'atteindre cet objectif sur les navigateurs de bureau, les navigateurs mobiles ont tendance à masquer les barres de défilement jusqu'à ce que le défilement soit tenté.

Pour résoudre ce problème, vous pouvez améliorer votre CSS avec l'option propriétés spécifiques au webkit 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;
}

Ce code modifie l'apparence des barres de défilement, les rendant visibles et ajustant leur largeur et leur apparence. En appliquant ces propriétés, vous pouvez garantir que les barres de défilement sont toujours visibles sur les ordinateurs de bureau et les appareils mobiles, améliorant ainsi l'expérience utilisateur.

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!