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

Для стилизации скролла с помощью CSS можно использовать псевдоэлементы ::-webkit-scrollbar и ::-webkit-scrollbar-thumb для браузеров, использующих движок WebKit (Google Chrome, Safari) и ::-moz-scrollbar и ::-moz-scrollbar-thumb для Mozilla Firefox.

Пример стилизации скролла для WebKit:

/* Стилизация всего скролла */
::-webkit-scrollbar {
    width: 10px; /* ширина скролла */
}

/* Стилизация ползунка скролла */
::-webkit-scrollbar-thumb {
    background-color: #ccc; /* цвет ползунка */
}

Пример стилизации скролла для Firefox:

/* Стилизация всего скролла */
::-moz-scrollbar {
    width: 10px; /* ширина скролла */
}

/* Стилизация ползунка скролла */
::-moz-scrollbar-thumb {
    background-color: #ccc; /* цвет ползунка */
}

Также можно добавить другие стили, например, изменить цвет фона или добавить градиенты. Важно помнить, что поддержка этих псевдоэлементов может изменяться в зависимости от браузера, поэтому стоит тестировать стилизацию на различных браузерах.