ZorNet.Ru — сайт для вебмастера » HTML и CSS » Изменение полосы прокрутки на чистом CSS

Изменение полосы прокрутки на чистом CSS

Кто решил изменить полосу прокрутки в CSS, включая управление шириной и оттенком цвета, то думаю эта стилистика вам отлично подойдет. Так как вся настройка может происходить в ручном режиме, что как для светлого или темного дизайн, можно сделать под саму основу портала. Где-то ширину поменять или прозрачную полосу выставить, все от веб мастера зависит. Проверяя элементы на браузере Хром, то все отлично отображается, и можно ставит в CSS в самый низ и там производить настраивание, как вы хотите видеть.

В наши дни настройка полос прокрутки вернулась, но на этот раз от WebKit. Сейчас это немного лучше, потому что свойства имеют префикс поставщика (например::-webkit-scrollbar) и используют Shadow DOM. Если вы используете браузер WebKit, вы увидите, что следующие полосы прокрутки были разработаны с использованием расширений.

Для изменение, нужно в CSS прописать стили.

Код

::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar:horizontal {
  height: 9px;
}
::-webkit-scrollbar-track {
  background: rgba(216, 209, 209, 0.99);
}
::-webkit-scrollbar-thumb {
  background: rgba(185, 184, 184, 0.99);
}
::-webkit-scrollbar-button {
  background: rgba(220, 130, 41, 0.99);
}
::-webkit-scrollbar-button:start:hover {
  background: rgba(0, 128, 0, 0.99);
}
::-webkit-scrollbar-track-piece:start:hover {
  background: rgba(69, 69, 243, 0.97);
}

03 Декабря 2017 Просмотров: 1248 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0