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

Question

Olga Pejenkova · Accepted Answer

Для стилизации скролла с помощью _CSS_ можно использовать псевдоэлементы `::-webkit-scrollbar` и `::-webkit-scrollbar-thumb` для браузеров, использующих движок _WebKit_ (_Google Chrome_, _Safari_) и `::-moz-scrollbar` и `::-moz-scrollbar-thumb` для _Mozilla Firefox_.

Пример стилизации скролла для _WebKit_:

```css
/* Стилизация всего скролла */
::-webkit-scrollbar {
    width: 10px; /* ширина скролла */
}

/* Стилизация ползунка скролла */
::-webkit-scrollbar-thumb {
    background-color: #ccc; /* цвет ползунка */
}
```

Пример стилизации скролла для _Firefox_:

```css
/* Стилизация всего скролла */
::-moz-scrollbar {
    width: 10px; /* ширина скролла */
}

/* Стилизация ползунка скролла */
::-moz-scrollbar-thumb {
    background-color: #ccc; /* цвет ползунка */
}
```

Также можно добавить другие стили, например, изменить цвет фона или добавить градиенты. Важно помнить, что поддержка этих псевдоэлементов может изменяться в зависимости от браузера, поэтому стоит тестировать стилизацию на различных браузерах.

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

Ответы

Каталог