Как стилизовать полосу прокрутки в CSS?

Question

[shynga]

Добрый день!
Хотел бы узнать как отредактировать полосу прокрутки в CSS?
Можно ли из этого.

Сделать это.


Только с помощью css?

Answer 1

[Антон Литвиненко]

Можно, но поддерживает только браузеры на базе webkit, оптимально использовать плагин

Answer 2

[Фин Дел]

больше информации тут

Comments

[Максим]

что там в codepen то ?

[Фин Дел]

Максим Ленский,

body {
  height: 200vh;
}
::-webkit-scrollbar {
  width: 8px;
  background: #eee;
}
::-webkit-scrollbar-thumb {
  background: gray;
  border-radius:20px;
}

[Максим]

Фин Дел, о чё FF выпендривается тогда ?

[Фин Дел]

Максим Ленский, не знаю приятель, надо у него спрашивать

[Александр]

Максим Ленский, Для FF это (scrollbar-color, scrollbar-width).

[Максим]

Александр, не будет это работать в FF мне кажется

[Александр]

Максим Ленский, Поддержку посмотрели?

[Максим]

Александр, ого - честно я впервые это вижу - круто

Answer 3

[Александр]

Читать для реализации в Firefox.

Answer 4

[Tranceinheart]

Есть какие-то способы, слабо работающие. Советую вот это https://grsmto.github.io/simplebar/ .

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css">
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>

Сам пользуюсь

Comments

[shynga]

Без js можно как то сделать?

[Александр]

Плагин - фигня. Через клавиатуру ничего не работает.