Exibindo barras de rolagem em navegadores móveis

Esta questão se concentra no problema de barras de rolagem ocultas em navegadores móveis ao usar "overflow:auto" ou " overflow:visible" em conteúdo rolável. Embora a barra de rolagem esteja visível em navegadores de desktop, ela desaparece em dispositivos móveis, a menos que seja rolada ativamente.

Para resolver esse problema, você pode modificar seu CSS para incluir o seguinte código, que é específico para o mecanismo do 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 a aparência da barra de rolagem, incluindo largura, altura, cor do polegar e cor da trilha. Ao personalizar essas propriedades, você pode tornar a barra de rolagem sempre visível em dispositivos móveis, mesmo antes de rolar.