Кастомизация полосы прокрутки

Скролл бар используется не только на веб страницах но и в отдельных формах, поэтому его форма и размер имеют большое значение. Да и с красивым дизайном сочетаться стандартная панель прокрутки не будет. Самое простое решение данной проблемы - это стилизовать стандартный скролл средствами 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 - При наведении на блок меняет цвет трэка

Результатом данного кода будет такой скроллбар