Чтобы создать собственную полосу прокрутки с помощью CSS, вы можете использовать несколько методов. Вот несколько подходов, которые вы можете попробовать:

Метод 1: использование псевдоэлемента ::webkit-scrollbar (для браузеров на основе WebKit)

/* Track */
::-webkit-scrollbar {
  width: 8px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Метод 2: использование свойства ширины полосы прокрутки (для Firefox)

Метод 3: использование свойства Scrollbar-color (для Firefox и Edge)

Метод 4. Использование собственной библиотеки или плагина полос прокрутки

Если вы предпочитаете более надежное решение, вы можете использовать собственную библиотеку или плагин полос прокрутки. Эти библиотеки предоставляют более широкие возможности настройки и кросс-браузерную совместимость. Некоторые популярные из них включают PerfectScrollbar, SimpleBar и OverlayScrollbars.