StillMaster » Веб разработка » CSS » Как скрыть или изменить цвет полосы прокручивания (Скрулбара)

Как скрыть или изменить цвет полосы прокручивания (Скрулбара)
Как скрыть или изменить цвет полосы прокручивания (Скрулбара)

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

Как сделать горизонтальный скроллбар который можно двигать с помощью мыши. 

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

Как скрыть полосу прокрутки совсем.

Если вы хотите полностью скрыть полосу прокрутки, но при этом перемещение блоков с помощью мышки осталось возможным вам нужно добавить псевдоэлемент.

.scroll::-webkit-scrollbar {
    width: 0;
}

Где вместо, .scroll ваше название div полосу прокрутки которого вам нужно скрыть.

Как сделать чтобы полоса прокрутки появлялась при наведении.

Если вам необходимо скрыть полосу прокрутки, но при наведении на нее, она появлялась, нужно задать следующие параметры CSS.

.scroll { visibility: hidden;}
.scroll:hover {visibility: visible;}

Но стоит учитывать, что на элементах которые находятся внутри скроллбара, должен стоять visibility: visible; иначе их тоже будет не видно.

Как изменить цвет полосы прокрутки.

Для изменения цвета мы воспользуемся следующими псевдоэлементами.

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

.scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #18aaaa;
}

.scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
  border-radius: 10px;
  background-color: black;
}

Вы можете задать любой цвет и любые настройки которые вам по душе. Ниже можете увидеть как это работает.



Яндекс Практикум

Если вам была полезна данная статья, то поделитесь данной статьей в социальной сети. А если вам нужна помощь в настройке сайта, нужна верстка или что то еще то жду Вас на kwork .


Поделиться:

372 20.02.23






Аватар
Виктор  14:38, 21 февраль
  • Нравится
  • 0

Спасибо огромное за помощь мне пригодится однозначно!


Ответить