Скроллбары с кнопкой вверх-вниз

Сейчас я стараюсь сокращать скорость загрузки сайта для мобильного телефона. Удаляю большие картинки, убираю лишние скрипты. И первое, что я убрала - кнопки вверх-вниз. Сама полоса прокрутки, которая есть в браузере довольно функциональна. У неё есть кнопки вверх-вниз, поэтому дополнительный скрипт кнопок особо и не нужен. Можно изменить внешний вид полосы прокрутки, с помощью css.

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

Ниже не сколько примеров изменений внешнего вида полосы прокрутки, с кнопками и стрелками вверх-вниз.

Вид 1

::-webkit-scrollbar {
    width: 15px; 
    height: 10px;
    background-color: #eeeeee;
}
::-webkit-scrollbar-thumb {
    background-color: #c5894d;
    border-radius: 9em;
    box-shadow: inset 1px 1px 10px #ebc2af;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #eed5bd;
}
::-webkit-scrollbar-button:vertical:start:decrement {
    background: linear-gradient(120deg, #6d3301 40%, rgba(0, 0, 0, 0) 41%),
    linear-gradient(240deg, #6d3301 40%, rgba(0, 0, 0, 0) 41%),
    linear-gradient(0deg, #6d3301 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #f6f8f4;
}
::-webkit-scrollbar-button:vertical:end:increment {
    background:
        linear-gradient(300deg, #6d3301 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(60deg, #6d3301 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(180deg, #6d3301 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #f6f8f4;
}
::-webkit-scrollbar-button:horizontal:start:decrement {
    background:
        linear-gradient(30deg, #6d3301 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(150deg, #6d3301 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(270deg, #6d3301 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #f6f8f4;
}
::-webkit-scrollbar-button:horizontal:end:increment {
    background:
        linear-gradient(210deg, #6d3301 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(330deg, #6d3301 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(90deg, #6d3301 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #f6f8f4;
}     

В коде выделила значения, которые можно изменить:

Ширина вертикального скролла — синим цветом

Высота горизонтального скролла — красным цветом

Цвет полосы — зелёным цветом

Цвет ползунка — оранжевым цветом

Тень ползунка — коричневым цветом

Цвет ползунка при наведении курсора — розовым цветом

Цвет треугольника — голубым цветом

Цвет вокруг треугольника — салатовым цветом

Вид 2

::-webkit-scrollbar{ width: 12px;}
::-webkit-scrollbar:horizontal{ height: 12px;} 
::-webkit-scrollbar-button {background: #563fff;}
::-webkit-scrollbar-track {background: #f0f0f0;}
::-webkit-scrollbar-track-piece { background: #f0f0f0;}
::-webkit-scrollbar-thumb {background: #7f74d0; border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); }

Код и скроллбар простенький. Двигается страница, при нажатии на квадратики сверху и снизу.

Синим в коде выделила ширину вертикального скроллбара

Красным — длину горизонтального скроллбара

Оранжевым — цвет кнопок вверх-вниз

Голубым — цвет дорожки

Салатовым — видимая часть трека

Вид 3

::-webkit-scrollbar {
  width: 12px;
  background: #28071a;  
}
::-webkit-scrollbar-track {
   box-shadow: inset 0 0 10px #cccccc;
  border-radius: 0 px;
  background: #f3f1f1;
  margin: 5px 0;
}
::-webkit-scrollbar-thumb {
  background: #28071a;
  border-radius: 0px;  
  box-shadow: inset 0 0 5px #151414;
}
::-webkit-scrollbar-thumb:hover { box-shadow: inset 0 0 10px #151414; }
::-webkit-scrollbar-button {
  background: #fafafa;
  box-shadow: inset 0 0 5px #fafafa;
  border-radius: 0px;  
border: 3px solid #28071a;
}
::-webkit-scrollbar-button:hover { box-shadow: inset 0 0 3px #fafafa; background: snow;}
}

Поменять можно:

В коде выделила значения, которые можно изменить:

Ширина вертикального скролла — синим цветом

Цвет полосы — зелёным цветом

Цвет ползунка — оранжевым цветом

Цвет ползунка при наведении курсора — красным цветом

Цвет рамки кнопки вверх-вниз — голубым цветом