Как стилизовать полосу прокрутки для браузеров webkit и каковы компоненты полосы прокрутки?

Опубликовано: 21 Февраля, 2023

Мы ежедневно используем полосу прокрутки при работе в Интернете. Полосы прокрутки — это инструменты, с помощью которых мы можем прокручивать содержимое нашей веб-страницы. Проблема с полосами прокрутки по умолчанию заключается в том, что они всегда отображаются одним и тем же тускло-серым цветом. Но как же сделать так, чтобы они хорошо выглядели? В этой статье мы узнаем, как сделать полосу прокрутки красивой.

Из каких компонентов состоит полоса прокрутки? Прежде чем узнать о том, как стилизовать полосу прокрутки, сначала мы должны изучить ее различные компоненты. Полоса прокрутки в основном состоит из следующих компонентов:

Сама полоса прокрутки
Кнопка со стрелкой вверх или вправо
Нижняя или левая кнопка со стрелкой
Поле прокрутки (большой палец)
Страница вверх или страница вправо
Область страницы вниз или страницы слева

Как оформить полосу прокрутки? Chrome, Edge, Safari и Opera поддерживают нестандартный псевдоэлемент ::-webkit-scrollbar, который помогает нам изменить внешний вид полосы прокрутки браузера.

::webkit-scrollbar-{component}

Компонент — это та часть полосы прокрутки, которую мы хотим стилизовать. Различные компоненты уже описаны выше.

Пример 1:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Scroll Bar</title>
    <link rel="stylesheet" href="style.css">
</head>
  
<body style="background-color: #eeeeee">
    <h1 style="text-align: center; color: green;">
      GeeksforGeeks</h1>
    <h1 style="text-align: center; color: orange;">
      How to style a scrollbar?</h1>
</body>
  
</html>

CSS

::-webkit-scrollbar {
    width: 15px;
    background-color: green;
}

Вывод: Это заполнит нашу полосу прокрутки зеленым цветом:

Пример 2: Теперь давайте сделаем его лучше. Теперь давайте стилизуем кнопки большого пальца, трека и прокрутки:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Scroll Bar</title>
    <link rel="stylesheet" href="style.css">
</head>
  
<body style="background-color: #eeeeee">
    <h1 style="text-align: center; color: green;">
      GeeksforGeeks</h1>
    <h1 style="text-align: center; color: orange;">
      How to style a scrollbar?</h1>
</body>
  
</html>

CSS

::-webkit-scrollbar {
    width: 15px;
}
::-webkit-scrollbar-track {
    background-color: #444444;
}
::-webkit-scrollbar-button {
    background-color: orange;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, pink, blue);
}

Выход:

Technical Scripter Picked HTML CSS

Как стилизовать полосу прокрутки для браузеров webkit и каковы компоненты полосы прокрутки?

HTML

CSS

HTML

CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ