Як видалити скролбар або змінити його вигляд в HTML/CSS
Смуга прокрутки (скролбар) є стандартним елементом браузера, але іноді потрібно її змінити або повністю приховати. У цій статті ми розглянемо всі способи роботи зі скролбаром за допомогою HTML, CSS та JavaScript.
1. Як повністю прибрати скролбар в HTML/CSS
Якщо вам потрібно видалити смугу прокрутки, але залишити можливість скролінгу, то достатньо CSS-стилів.
1.1 HTML-код для приховування скролбара
HTML:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Прихований скролбар</title>
<style>
body {
overflow: hidden; /* Повністю прибирає прокрутку */
}
</style>
</head>
<body>
<h1>Сайт без скролбара</h1>
<p>Ця сторінка не має прокрутки.</p>
</body>
</html>
Опис коду:
- overflow: hidden; – вимикає будь-яку прокрутку сторінки.
- Після цього користувач не зможе прокручувати сторінку навіть якщо контент більший за екран.
1.2 Приховати скролбар, але залишити прокрутку (Chrome, Safari, Edge)
Якщо потрібно залишити прокрутку, але приховати саму смугу:
CSS:
body {
overflow: auto;
}
/* Приховує скролбар у WebKit-браузерах */
body::-webkit-scrollbar {
display: none;
} 1.3 Приховати скролбар у Firefox
Для браузера Firefox потрібно використати scrollbar-width:
CSS:
html {
scrollbar-width: none; /* Приховує скролбар */
} 2. Як змінити вигляд скролбара в CSS
Якщо потрібно зробити красивий дизайн скролбара, використовуйте ::-webkit-scrollbar. 2.1 HTML-код з кастомним скролбаром
HTML:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Стилізація скролбара</title>
<style>
/* Стилізуємо скролбар */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #3498db;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #2980b9;
}
</style>
</head>
<body>
<h1>Сторінка з кастомним скролбаром</h1>
<p>Прокрутіть сторінку, щоб побачити ефект.</p>
</body>
</html> Опис коду:
- ::-webkit-scrollbar – задає ширину смуги прокрутки.
- ::-webkit-scrollbar-track – задає фон (колір каналу).
- ::-webkit-scrollbar-thumb – змінює стиль "повзунка" прокрутки.
- ::-webkit-scrollbar-thumb:hover – змінює колір повзунка при наведенні.
Мінус: Цей метод працює тільки в Chrome, Edge, Safari. 3. Як зробити кастомний скролбар для конкретного блоку
Якщо потрібно змінити скролбар не для всього сайту, а тільки для певного блоку: 3.1 HTML-код з кастомним скролбаром для блоку
HTML:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Кастомний скролбар у блоці</title>
<style>
.scroll-box {
width: 300px;
height: 150px;
overflow-y: scroll; /* Додає вертикальний скролбар */
border: 1px solid #ccc;
}
.scroll-box::-webkit-scrollbar {
width: 8px;
}
.scroll-box::-webkit-scrollbar-thumb {
background: #ff5733; /* Червоний повзунок */
border-radius: 5px;
}
.scroll-box::-webkit-scrollbar-track {
background: #f1f1f1;
}
</style>
</head>
<body>
<div class="scroll-box">
<p>Цей блок має власний стиль скролбара.</p>
<p>Тут багато контенту...</p>
<p>Ще більше тексту...</p>
</div>
</body>
</html> 4. Як повністю видалити скролбар за допомогою JavaScript
Якщо потрібно прибрати скролбар динамічно, можна використати JavaScript. 4.1 Видалити скролбар через JavaScript
JavaScript:
document.body.style.overflow = "hidden"; // Повністю приховує прокрутку 4.2 Приховати скролбар, але залишити прокрутку
JavaScript:
document.body.style.overflowY = "scroll";
document.body.style.scrollbarWidth = "none"; // Для Firefox
5. FAQ (Поширені питання)
Чи можна змінити скролбар в усіх браузерах?
Ні. Повна кастомізація працює тільки в WebKit-браузерах (Chrome, Edge, Safari). У Firefox можна змінити колір через scrollbar-color. Як зробити скролбар прозорим?
Використовуйте background: transparent:
CSS:
::-webkit-scrollbar-track {
background: transparent;
} Як прибрати горизонтальний скролбар, але залишити вертикальний?
Використовуйте overflow-x: hidden:
CSS:
body {
overflow-x: hidden;
overflow-y: auto;
} Висновок
Якщо потрібно повністю приховати скролбар – overflow: hidden. Якщо хочете змінити стиль скролбара – ::-webkit-scrollbar. Якщо потрібно стилізувати конкретний блок – використовуйте .scroll-box::-webkit-scrollbar. Для Firefox використовуйте scrollbar-width. Якщо потрібно видалити скролбар через JS – document.body.style.overflow = "hidden".
Сподобалася стаття? Поділіться нею в соцмережах!
Якщо у вас залишилися запитання – пишіть у коментарях! 