Mostrar barras de desplazamiento en navegadores móviles

Esta pregunta se centra en el problema de las barras de desplazamiento ocultas en los navegadores móviles cuando se usa "overflow:auto" o " overflow:visible" en contenido desplazable. Si bien la barra de desplazamiento es visible en los navegadores de escritorio, desaparece en los dispositivos móviles a menos que se desplace activamente.

Para resolver este problema, puede modificar su CSS para incluir el siguiente código, que es específico del motor del navegador 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;
}

Este código define la apariencia de la barra de desplazamiento, incluido su ancho, alto, color del pulgar y color de la pista. Al personalizar estas propiedades, puedes hacer que la barra de desplazamiento esté siempre visible en dispositivos móviles, incluso antes de desplazarte.