Доверьте продвижение нам

Попробуйте надежный хостинг для вашего сайта

Мы рекомендуем своим клиентам! Получите надежность и полное управление вашим сайтом.

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Как изменить скроллбар CSS

Views Icon49

Для изменения внешнего вида скроллбара с помощью CSS можно использовать следующие свойства:

  1. scrollbar-width — устанавливает ширину скроллбара. Значение thin устанавливает тонкий скроллбар, а auto — стандартную ширину.
  2. scrollbar-color — устанавливает цвет скроллбара. Значение должно состоять из двух цветов, разделенных запятой: первый цвет — это цвет полосы скроллбара, второй — цвет фона скроллбара.
  3. ::-webkit-scrollbar — псевдоэлемент, который позволяет настраивать внешний вид скроллбара в браузерах на основе движка WebKit (например, Google Chrome, Safari).
  4. ::-webkit-scrollbar-thumb — псевдоэлемент, который позволяет настраивать внешний вид полосы скроллбара в браузерах на основе движка WebKit.

Пример использования:

/* Установка тонкого скроллбара с красной полосой */
::-webkit-scrollbar {
  width: thin;
}

::-webkit-scrollbar-thumb {
  background-color: red;
}

/* Установка стандартной ширины скроллбара с градиентной полосой */
::-webkit-scrollbar {
  width: auto;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #ff0000, #0000ff);
}

/* Установка ширины и цвета скроллбара */
body {
  scrollbar-width: thin;
  scrollbar-color: red blue;
}
Поделиться:

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.