Как стилизовать или убрать полосу прокрутки — CSS скроллбар

HTML/CSS

16 апреля 2020178152

Стилизованные полосы прокрутки становятся популярными, думаю, вы уже сталкивались с такими сайтами, которые имеют уникальный скроллбар (к примеру, наш сайт). Есть два способа реализации этой задачи: с помощью CSS3 или используя jQuery плагин. Мы будем использовать наиболее простой — напишем CSS стили.

Примечание: стилизовать полосу прокрутки через -webkit префикс возможно только в браузерах, использующих механизм рендеринга Webkit (и Blink). То есть в Firefox и IE этот способ не сработает.

Часто бывает необходимо убрать или скрыть скроллбар css совсем. Для начала, давайте рассмотрим как это сделать.

1 Как убрать полосу прокрутки CSS

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

CSS
/*Убрать полосу прокрутки у элемента*/
.element::-webkit-scrollbar {
  width: 0;
}

/*Убрать полосу прокрутки для всей страницы*/
::-webkit-scrollbar {
  width: 0;
}

2 Как изменить скроллбар CSS

Теперь давайте рассмотрим базовую структуру полосы прокрутки:

-webkit-scrollbar состоит различных псевдо-элементов.

::-webkit-scrollbar — это фон самого скроллбара.
::-webkit-scrollbar-button — кнопки направления на полосе прокрутки.
::-webkit-scrollbar-track — пустое пространство под индикатором прокрутки.
::-webkit-scrollbar-thumb — индикатор прокрутки, перетаскиваемый элемент.

Проверим как все это работает. Чтобы попробовать изменить скроллбар css, создадим пустой HTML документ. Вам необходимо добавить style.css ваш HTML файл. В разметку добавим div с id element, имеющий полосу прокрутки, чтобы применить на него наши стили.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
  <div id="element">
      <div class="overflow"></div>
  </div>
</body>
</html>

3 CSS стили

Для того, чтобы у элемента div появилась полоса прокрутки, добавим следующие свойства.

CSS
#element {
  overflow-y: scroll;
  background-color: #ffffff;
  width: 200px;
  height: 200px;
}

.overflow {
  min-height: 400px;
}

Теперь давайте используем псевдоэлемент для создания пользовательского скроллбара. Заменим ширину по умолчанию на новую — в 7 пикселей. Затем, добавим цвет полосы через свойство background-color: #f9f9fd.

Если вы хотите изменить ширину скролла всей страницы, а не отдельного элемента, то используйте ::-webkit-scrollbar без дополнительных селекторов.

CSS
#element::-webkit-scrollbar {
    width: 7px;
    background-color: #f9f9fd;
}

Ширина полосы в 7 пикселей

Мы уже знаем, что скроллбар состоит из полосы, кнопки и индикатора прокрутки. Используем псевдо элемент ::-webkit-scrollbar-thumb, для того чтобы стилизовать индикатор.

CSS
#element::-webkit-scrollbar-thumb {
    background-color: #223c50;
}

Изменение цвета индикатора

Добавим свойство box-shadow полосе, чтобы добавить скроллбару контрастность. Подобрать подходящую тень можно в нашем box-shadow генераторе.

CSS
#element::-webkit-scrollbar-track {
    -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
    background-color: #f9f9fd;
}

Добавление внутренней тени

В заключении: вот еще несколько вариантов, которые вы можете использовать на своем сайте.

Пример 1

Пример 2

Пример 3

Пример 4

Пример 1
#element::-webkit-scrollbar {
  width: 10px;
  background-color: #f9f9fd;
}

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

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

Пример 2
#element::-webkit-scrollbar {
  width: 10px;
}

#element::-webkit-scrollbar-track {
  -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
  background-color: #f9f9fd;
}

#element::-webkit-scrollbar-thumb {
  background-color: #f2bf93;
  background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .25) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, .25) 50%,
                    rgba(255, 255, 255, .25) 75%,
                    transparent 75%,
                    transparent);
}

Пример 3
#element::-webkit-scrollbar {
  width: 10px;
}

#element::-webkit-scrollbar-track {
  -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
  background-color: #f9f9fd;
}

#element::-webkit-scrollbar-thumb {
  background-color: #356184;
  background-image: -webkit-gradient(linear, 0 0, 0 100%,
                    color-stop(.5, rgba(255, 255, 255, .25)),
                    color-stop(.5, transparent), to(transparent));
}

В четвертом примере мы используем градиент. Настроить его можно в CSS генераторе градиента.

Пример 4
#element::-webkit-scrollbar {
  width: 10px;
}

#element::-webkit-scrollbar-track {
  -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
  background-color: #f9f9fd;
  border-radius: 10px;
}

#element::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(180deg, #00c6fb, #005bea);
}