Как стилизовать скроллбар

Делал меню на сайте и в очередной раз столкнулся с необходимостью стилизовать скроллбар на сайте. Дефолтные полосы прокрутки, возникающие при переполнении блока с overflow: auto; выглядят, конечно, ужасно.

Сперва укажем ширину вертикального и высоту горизонтального скроллбара для Webkit-браузеров (Safari).

.scrollable-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

Следом стилизуем ползунок.

.scrollable-container::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 6px;
  border: 1px solid #777;
  background-clip: content-box;
}

.scrollable-container::-webkit-scrollbar-thumb:hover {
  background-color: #777;
}

Следом можем стилизовать сам трек.

.catalog-nav__scrollable::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 8px;
}

.catalog-nav__scrollable::-webkit-scrollbar-track:hover {
    background-color: transparent;
}

И даже уголок между горизонтальным и вертикальным треками.

.catalog-nav__scrollable::-webkit-scrollbar-corner {
    background-color: transparent;
}

Но, к сожалению, всё описанное выше будет работать только в Safari. Для остальных браузеров остаётся всего три свойства.

• scrollbar-width — ширина скроллбара, причём не ширина в каких-то единицах, а три варианта: обычный, тонкий или никакого.
• scrollbar-color — принимает два цвета: первый для ползунка, второй для трека.
• scrollbar-gutter — позволяет зафиксировать отступ даже если полоса прокрутки не появилась (чтобы контент не прыгал).

.catalog-nav__scrollable {
    scrollbar-width: thin;
    scrollbar-color: #555 transparent;
    scrollbar-gutter: auto;
}