Пользовательские полосы прокрутки становятся популярными, и вы, наверняка, сталкивались с веб-сайтами с уникальными полосами прокрутки, что позволяло сайтам выглядеть более стильно. Существует несколько способов реализации пользовательской полосы прокрутки. В этом уроке мы будем использовать CSS, что является самым простым способом.

Для создание пользовательской полоски прокрутки нам потребуется минимальные знания css.
Добавте этот код в style.css вашей темы или дочерний темы, а так же мжно расположить код во вкладке внешний вид/настроки/дополнительнфе стили .

Первым шагом мы указали ширину полоски прокрутки 0.5 и соответственно задали ей цвет, вы же можете задать ширину и цвет на свой вкус.
Далее мы задали высоту обтекания линии, а так же закруглили края у ползунка.
Финал будет hower эффект при наведения мышки, цвета вы так же можете задать на свой вкус и цвет!

/*линия скролла css*/
::-webkit-scrollbar {
 width:  0.5vw;
 background:  #000000;
}
/*линия скролла оптикание*/
::-webkit-scrollbar-thumb {
 background: -webkit-linear-gradient(transparent,#FF0000);
 border-radius: 2px;
}
/*линия скролла-наведение*/
::-webkit-scrollbar-thumb:hover{
 background: -webkit-linear-gradient(transparent,#ffffff);
 background: linear-gradient (transparent,#00c6ff); 
}

Пользовательская полоса прокрутки CSS для браузера (Firefox)

/ * Поддержка Firefox*/
html {
 scrollbar-width: thin;
 scrollbar-color: red green;
}