Демонстрация
Несколько вариантов воздушной стилизации скролл-бара в элементах с помощью CSS.

У нас есть <div id="scrollbar"></div>, и нам надо изменить скролл внутри него

Вариант 1:
Код
#scrollbar ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
#scrollbar ::-webkit-scrollbar-track {
  background-color: rgba(0,0,0,0.1);
  border-radius: 5px;
}
#scrollbar ::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.8);
  border-radius: 5px;
}

Подойдёт для заднего фона #63C189


Вариант 2:
Код
#scrollbar ::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}
#scrollbar ::-webkit-scrollbar-track {
  background-color: rgba(0,0,0,0.25);
}
#scrollbar ::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.8);
}

Подходит для заднего фона #ABA1C1


Вариант 3
Код
#scrollbar ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
#scrollbar ::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 5px;
}
#scrollbar ::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.5);
  border-radius: 5px;
}

Подходит для заднего фона #DF7878


Вариант 4
Код
#scrollbar ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
#scrollbar ::-webkit-scrollbar-track {
  background-color: rgba(0,0,0,0.2);
  box-shadow: inset 0px 0px 0px 2px #78addf;
  border-radius: 5px;
}
#scrollbar ::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,1);
  border-radius: 5px;
}

Подходит для заднего фона #78ADDF


Вариант 5
Код
#scrollbar ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
#scrollbar ::-webkit-scrollbar-track {
  background-color: #4f4f4f;
  border-radius: 5px;
}
#scrollbar ::-webkit-scrollbar-thumb {
  background-color: #ba605e;
  border-radius: 5px;
}

Подходит для фона #313640
Комментарии
avatar