Как сделать красивую полосу для прокрутки на CSS

Скролл бар используется не только на веб страницах но и в отдельных формах, поэтому его форма и размер имеют большое значение. Да и с красивым дизайном сочетаться стандартная панель прокрутки не будет. Самое простое решение данной проблемы — это стилизовать стандартный скролл средствами css3. Ограничение данного способа в том, что он работает только в браузерах использующих webkit
Вот пример HTML кода для работы:
<div class="scroll-block"></div>
CSS
.scroll-block {height: 70px;width: 340px;background: whitesmoke;overflow-y: scroll;border:1px solid;} .scroll-block::-webkit-scrollbar-track {border-radius: 4px;} .scroll-block::-webkit-scrollbar {width: 6px;} .scroll-block::-webkit-scrollbar-thumb {border-radius: 4px;background: #f0f2f5;} .scroll-block:hover::-webkit-scrollbar-thumb {background: #6a7d9b;}
Рассмотрим подробнее каждый элемент
::-webkit-scrollbar-track {border-radius: 4px;} — Задает для трэка скругление краев в 4px, так же можно добавить фон
::-webkit-scrollbar {width: 6px;} — Ширина скролла 6px
::-webkit-scrollbar-thumb {border-radius: 4px;background: #f0f2f5;} — Задает цвет и радиус скругления в трэка
:hover::-webkit-scrollbar-thumb — При наведении на блок меняет цвет трэка.
Так же если нужно оформить скролл-бар для всего сайта, то в CSS необходимо убрать .scroll-block, и тогда параметры станут глобальными.
Будут вопросы, задавайте в комментариях. Отвечу
Свежие комментарии