Войти
Регистрация

Меняем стиль полосы прокрутки

Меняем стиль полосы прокрутки

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

И так, в нашем примере я укажу свойства всего лишь для 3 селекторов, с помощью которых Вы сможете стилизовать полосу прокрутки. Существует много свойств, псэвдоэлементов и т.д для стилизации чуть ли не каждой частички полосы, но лично для меня важен строгий и минимальный стиль для полосы, чтобы она не выделялась из общего контента сайта.

1. Цвет дорожки, по которой движется бегунок:

::-webkit-scrollbar-track {
   background-color:#444243;
}

2. Цвет бегунка и его радиус закругления:

::-webkit-scrollbar-thumb {
   -webkit-border-radius:10px;
   border-radius:10px;
   background-color:#f26b19;
}

3. Цвет бегунка при наведении мышкой:

::-webkit-scrollbar-thumb:hover {
   background-color:#d85e15;
}

4. Ширина полосы прокрутки:

::-webkit-scrollbar {
   width:10px;
}

Весь код:

::-webkit-scrollbar-track {
   background-color:#444243;
}
::-webkit-scrollbar-thumb {
   -webkit-border-radius:10px;
   border-radius:10px;
   background-color:#f26b19;
}
::-webkit-scrollbar-thumb:hover {
   background-color:#d85e15;
}
::-webkit-scrollbar {
   width:10px;
}

И результат работы кода следующий:

Равным образом новая модель организационной деятельности позволяет выполнять важные задания по разработке новых предложений. С другой стороны начало повседневной работы по формированию позиции позволяет выполнять важные задания по разработке направлений прогрессивного развития. Идейные соображения высшего порядка, а также сложившаяся структура организации способствует подготовки и реализации систем массового участия. Товарищи! консультация с широким активом представляет собой интересный эксперимент проверки системы обучения кадров, соответствует насущным потребностям. Не следует, однако забывать, что консультация с широким активом влечет за собой процесс внедрения и модернизации новых предложений. Значимость этих проблем настолько очевидна, что сложившаяся структура организации позволяет выполнять важные задания по разработке существенных финансовых и административных условий. Не следует, однако забывать, что постоянное информационно-пропагандистское обеспечение нашей деятельности представляет собой интересный эксперимент проверки позиций, занимаемых участниками в отношении поставленных задач.

Этих CSS-свойств думаю Вам будет достаточно, чтобы сделать стиль Вашего скролла на сайте. Если Вы хотите сделать скролл для конкретного блока, то перед двоеточием вначале свойства укажите селектор тега, класса или id для которого применяется стиль полосы.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?