Отображение полос прокрутки в мобильных браузерах

Этот вопрос посвящен проблеме скрытых полос прокрутки в мобильных браузерах при использовании «overflow:auto» или « overflow:visible» для прокручиваемого содержимого. Хотя полоса прокрутки видна в браузерах для настольных компьютеров, она исчезает на мобильных устройствах, если она не активно прокручивается.

Чтобы решить эту проблему, вы можете изменить свой CSS, включив в него следующий код, специфичный для движка браузера 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;
}

Этот код определяет внешний вид полосы прокрутки, включая ее ширину, высоту, цвет ползунка и цвет дорожки. Настраивая эти свойства, вы можете сделать полосу прокрутки всегда видимой на мобильных устройствах, даже до прокрутки.