Как это ни странно у новичков частенько возникает вопрос, как стилизовать скролл при помощи CSS. Ответ максимально простой, точно такой же код я использую и в этом блоге. После листинга объяснение что за что отвечает. Да и данный пример можно и расширить, но данный проще для освоения и понимания.

body::-webkit-scrollbar {
    background-color: rgb(255, 255, 255);
    width: 12px;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px #000000;
}

body::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 48px #000000;
}
  1. body::-webkit-scrollbar – Общий фон скроллбара с указанием его ширины.
  2. body::-webkit-scrollbar-track – оформление трека скроллбара.
  3. body::-webkit-scrollbar-thumb – оформление самого прямоугольнка что ходит по краю экрана.

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


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

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