Кастомизация скроллбара на сайте

Выяснилось, что на мобильных устройства полосы прокрутки не видны по-умолчанию. Они появляются только когда человек начинает прокручивать страницу или часть страницы. 

В некоторых ситуациях требуется сделать полосу прокрутки видимой постоянно, например, при использовании респонсив таблицы. В этом случае для блока, в который входит таблица (в нашем случае «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/