Скроллбары с кнопкой вверх-вниз
О том как менять стили прокрутки на блоге уже есть статья. Там много видов полос, но внешне они не дают понять читателю, что можно быстро спуститься вниз или подняться вверх по странице, нажав на кнопку или стрелку
Ниже не сколько примеров изменений внешнего вида полосы прокрутки, с кнопками и стрелками вверх-вниз.
Вид 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;}
}
Поменять можно:В коде выделила значения, которые можно изменить:
Ширина вертикального скролла — синим цветомЦвет полосы — зелёным цветом
Цвет ползунка — оранжевым цветом
Цвет ползунка при наведении курсора — красным цветом
Цвет рамки кнопки вверх-вниз — голубым цветом
Комментарии со спамом удаляются.