Прокрутить вверх

Стилизация полосы прокрутки

Установка

Вставляем данный код в Таблицу стилей (CSS)

::-webkit-scrollbar-button {
background-image:url('');
background-repeat:no-repeat;
width:5px;
height:0px
}

::-webkit-scrollbar-track {
background-color:#ecedee
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background-color:#6dc0c8;
}

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

::-webkit-resizer{
background-image:url('');
background-repeat:no-repeat;
width:4px;
height:0px
}

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

Установка на этом завершена. Теперь разберем, какая строка за что отвечает.

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

Меняем ecedee на свой цвет.

::-webkit-scrollbar-track {
background-color:#ecedee
}

Цвет бегунка полосы, а так же его закругление.

Меняем 6dc0c8 на свой цвет.

Меняем значение border-radius для закругления.

::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
  border-radius: 0px;
  background-color:#6dc0c8;
  }

Цвет бегунка при наведении на него курсора.

Меняем 56999f на свой цвет.

::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
  border-radius: 0px;
  background-color:#6dc0c8;
  }

Основная ширина полосы прокрутки.

Меняем значение width

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

 

Author avatar
Никита Зайцев
https://webzaytsev.ru

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

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

  • Белгород

    Я нахожусь и обитаю в Белгороде
    С радостью встречусь с вами обсудить детали проекта
    1000км не проблема - контакты → и мы уже общаемся в скайпе!
  • Оставайтесь на связи

© 2016 - 2020
Все права защищены.
Сайт использует куки