Выяснилось, что на мобильных устройства полосы прокрутки не видны по-умолчанию. Они появляются только когда человек начинает прокручивать страницу или часть страницы.
В некоторых ситуациях требуется сделать полосу прокрутки видимой постоянно, например, при использовании респонсив таблицы. В этом случае для блока, в который входит таблица (в нашем случае «scroll_block»), и который должен прокручиваться добавляются CSS стили:
.scroll_block::-webkit-scrollbar-track{
border: 2px solid white;
background-color: #ccc;
}
.scroll_block::-webkit-scrollbar {
-webkit-appearance: none;
}
.scroll_block::-webkit-scrollbar:horizontal {
height: 13px;
}
.scroll_block::-webkit-scrollbar-thumb {
border-radius: 6px;
border: 2px solid white;
background-color: rgba(0, 0, 0, .5);
}
Тогда полоса прокрутки будет видна постоянно, а не только при наведении. Есть различные варианты стилей полос прокрутки, посмотреть их можно на этом сайте: http://manos.malihu.gr
Полоса прокрутки с противоположной стороны
По-умолчанию, полоса прокрутки располагается справа или снизу от прокручиваемого блока, но с помощью CSS стилей это можно изменить.
<div class="scroll">
<table class="inner">...</table>
</div>
Блоку с полосой делаем трансформ, а внутренностям обратный трансформ.
.scroll { overflow-x: scroll; transform: scaleY(-1); }
.inner { transform: scaleY(-1); }
Если полосу надо поставить не сверху, а слева, то пишем scaleX(-1).
Скроллбар с двух сторон блока
К сожалению, решения на CSS для двойного скроллбара нет, но есть решение на JavaScript. Посмотреть и скачать его можно на этом сайте https://codepen.io/