Как скрыть вертикальный скроллбар: техники для всех браузеров

Для кого эта статья:

• Веб-разработчики и программисты
• Дизайнеры пользовательских интерфейсов (UI/UX)

• Студенты и начинающие специалисты в области веб-дизайна и разработки

  Полоса прокрутки — необходимый элемент интерфейса, который, однако, может заметно нарушать целостность минималистичного дизайна. Работая над премиальным проектом, я не раз сталкивался с просьбой заказчика: "А можно убрать эту полосу справа? Она портит всю композицию!" И действительно, с точки зрения UX и эстетики аккуратно скрытый скроллбар часто становится той финальной деталью, которая превращает хороший дизайн в безупречный. Давайте разберем, как стилизовать или полностью скрыть вертикальный скроллбар, сохраняя функциональность прокрутки и обеспечивая корректное отображение во всех браузерах 🔍

Хотите не просто скрывать скроллбары, но полностью освоить веб-разработку? На курсе Обучение веб-разработке от Skypro вы изучите не только CSS-трюки, но и все аспекты современного фронтенда — от HTML до React.js. Уже через 9 месяцев вы сможете претендовать на позицию Junior-разработчика и создавать сайты любой сложности с идеальной стилизацией и безупречной функциональностью!

Основные методы скрытия вертикального скроллбара в CSS

Скрытие скроллбара — это не просто косметическое улучшение. Это способ создать более чистый, современный дизайн без ущерба для функциональности. В арсенале разработчика есть несколько базовых подходов к решению этой задачи.

Первое, что стоит понимать — большинство методов позволяют скрыть полосу прокрутки визуально, но сохраняют возможность прокручивать контент. Это принципиальный момент с точки зрения UX.

Рассмотрим основные методы скрытия скроллбара:

• Метод overflow + padding: скрывает скроллбар за пределами видимой области
• CSS-псевдоэлементы: применяются для браузеров на движке WebKit
• scrollbar-width: современное CSS-свойство для Firefox и других браузеров
• -ms-overflow-style: специфичное свойство для Microsoft Edge

Самый простой, но ограниченный способ полностью убрать полосу прокрутки — использовать overflow: hidden. Однако в этом случае пользователь потеряет возможность прокрутки содержимого:

.no-scroll {
overflow: hidden;
}

Для сохранения функциональности прокрутки при скрытии скроллбара подходит метод "маскировки". Создаём контейнер с фиксированной шириной и вложенный элемент с большей шириной и отрицательным отступом:

.container {
width: 300px;
overflow: hidden;
}

.content {
width: 317px; /* Ширина контента + ширина скроллбара */
overflow-y: scroll;
padding-right: 17px; /* Ширина скроллбара */
}

Важно отметить, что разные браузеры реализуют скроллбары по-разному, поэтому для создания кроссбраузерного решения потребуется комбинирование нескольких подходов.

Скрытие полосы прокрутки для WebKit-браузеров

Алексей Петров, Frontend Team Lead Разрабатывая премиальный интернет-магазин для ювелирного бренда, столкнулся с задачей создать ощущение бесконечного элегантного скроллинга в галерее изделий. Клиент настаивал на идеально чистом дизайне, без единого лишнего элемента интерфейса. Браузеры на WebKit решали эту задачу без проблем благодаря ::-webkit-scrollbar, но с Firefox возникли сложности. Только комбинируя все доступные методы, мы достигли идеального результата. Особенно клиенту понравилось, что при наведении появлялся тонкий, почти невидимый индикатор прокрутки — этот небольшой UX-штрих добавил сайту изысканности.

Браузеры на движке WebKit (Chrome, Safari, Opera) поддерживают специальные псевдоэлементы для стилизации скроллбара. Это дает разработчикам максимальную гибкость в кастомизации полос прокрутки или их полном скрытии. 🎨

Для скрытия скроллбара используется псевдоэлемент ::-webkit-scrollbar:

.hide-scrollbar::-webkit-scrollbar {
width: 0; /* Ширина вертикального скроллбара */
height: 0; /* Высота горизонтального скроллбара */
background: transparent; /* Прозрачный фон */
}

WebKit также предоставляет дополнительные псевдоэлементы для более тонкой настройки компонентов полосы прокрутки:

• ::-webkit-scrollbar-track — стилизация трека скроллбара
• ::-webkit-scrollbar-thumb — стилизация ползунка
• ::-webkit-scrollbar-button — стилизация кнопок прокрутки
• ::-webkit-scrollbar-corner — стилизация угла между полосами прокрутки

Вместо полного скрытия можно создать минималистичный скроллбар, который будет менее заметен:

.custom-scrollbar::-webkit-scrollbar {
width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
background: rgba(136, 136, 136, 0.5);
border-radius: 5px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: rgba(85, 85, 85, 0.8);
}

Для динамического отображения скроллбара только при прокрутке можно использовать комбинацию CSS и JavaScript:

.dynamic-scrollbar::-webkit-scrollbar {
width: 0;
transition: width 0.3s ease;
}

.dynamic-scrollbar.scrolling::-webkit-scrollbar {
width: 5px;
}

С соответствующим JavaScript для отслеживания состояния прокрутки:

const element = document.querySelector('.dynamic-scrollbar');

element.addEventListener('scroll', function() {
element.classList.add('scrolling');

// Убираем класс после окончания прокрутки
clearTimeout(element.scrollTimeout);
element.scrollTimeout = setTimeout(function() {
element.classList.remove('scrolling');
}, 1000);
});

Важно помнить, что решения на основе ::-webkit-scrollbar работают только в браузерах на движке WebKit и требуют дополнительных методов для обеспечения кроссбраузерности.

Решения для Firefox и Edge: универсальные подходы

Firefox и Edge требуют особого подхода для скрытия полосы прокрутки, поскольку они не поддерживают WebKit-специфические псевдоэлементы. К счастью, CSS предлагает альтернативные решения, которые работают в этих браузерах. 🦊

Для Firefox начиная с версии 64 доступно специальное свойство scrollbar-width, которое является частью W3C спецификации CSS Scrollbars:

.hide-scrollbar-firefox {
scrollbar-width: none; /* Полностью скрывает скроллбар */
}

Для более тонкой настройки можно использовать значение thin, которое делает полосу прокрутки уже:

.thin-scrollbar-firefox {
scrollbar-width: thin;
}

В Microsoft Edge (на движке EdgeHTML) применяется собственное свойство -ms-overflow-style:

.hide-scrollbar-edge {
-ms-overflow-style: none; /* Скрывает скроллбар в IE и Edge */
}

Для универсального решения, работающего во всех основных браузерах, необходимо комбинировать эти подходы:

.universal-hide-scrollbar {
/* Для Firefox */
scrollbar-width: none;

/* Для IE и Edge */
-ms-overflow-style: none;

/* Для WebKit */
&::-webkit-scrollbar {
display: none;
}
}

Также существует альтернативный подход с использованием обертки и абсолютного позиционирования:

.scroll-container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}

.scroll-content {
position: absolute;
top: 0;
left: 0;
right: -17px; /* Скрываем ширину скроллбара */
bottom: 0;
overflow-y: scroll;
}

С учетом того, что новые версии Edge теперь работают на движке Chromium, для них также будет работать решение с ::-webkit-scrollbar. Это существенно упрощает кроссбраузерную совместимость в современной веб-разработке.

Кроссбраузерные комбинированные техники для скроллбара

Создание по-настоящему кроссбраузерного решения для скрытия скроллбара требует комбинирования различных техник под специфику каждого браузера. Вот самое полное решение, которое работает во всех современных браузерах 🔄

Сначала определим базовый CSS-класс, который объединяет все необходимые свойства:

.hide-scrollbar {
/* Базовая функциональность прокрутки */
overflow-y: scroll;

/* Firefox */
scrollbar-width: none;

/* Internet Explorer и старые версии Edge */
-ms-overflow-style: none;
}

/* WebKit и Blink (Chrome, Safari, новые версии Edge, Opera) */
.hide-scrollbar::-webkit-scrollbar {
display: none; /* Или width: 0; */
}

Для обеспечения максимальной совместимости, особенно со старыми браузерами, можно добавить резервное решение с вложенным контейнером:

.scroll-wrapper {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}

.scroll-content {
position: absolute;
top: 0;
left: 0;
right: -20px; /* Компенсация ширины скроллбара */
bottom: 0;
overflow-y: scroll;
padding-right: 20px; /* Возврат нормального отображения контента */
}

При создании компонентов с прокруткой может потребоваться определение направления прокрутки. Вот универсальное решение для контроля направления прокрутки без отображения полос:

.scroll-x-only {
overflow-y: hidden;
overflow-x: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}

.scroll-x-only::-webkit-scrollbar {
height: 0;
width: 0;
}

.scroll-y-only {
overflow-x: hidden;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}

.scroll-y-only::-webkit-scrollbar {
height: 0;
width: 0;
}

Для более сложных случаев, когда требуется условное отображение скроллбара, можно использовать CSS-переменные и JavaScript:

.dynamic-scrollbar {
--scrollbar-width: 0px;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}

.dynamic-scrollbar::-webkit-scrollbar {
width: var(--scrollbar-width);
transition: width 0.3s ease;
}

.dynamic-scrollbar.show-scrollbar {
--scrollbar-width: 8px;
scrollbar-width: thin;
-ms-overflow-style: auto;
}

Важно проверять работоспособность решения во всех целевых браузерах и, при необходимости, применять полифиллы или JavaScript-обертки для обеспечения единообразного поведения.

Вот список проблем, которые могут возникнуть при скрытии скроллбаров, и их решения:

• Проблема с шириной контента: при скрытии вертикального скроллбара может появиться горизонтальный из-за изменения доступной ширины. Решение: добавьте overflow-x: hidden или корректируйте ширину с учетом скроллбара.
• Проблема с iOS Safari: некоторые старые версии iOS Safari игнорируют скрытие скроллбаров. Решение: используйте обертку с overflow: hidden и внутренний контейнер с отрицательным отступом.
• Проблема с прокруткой на сенсорных устройствах: на мобильных устройствах прокрутка может работать некорректно. Решение: добавьте -webkit-overflow-scrolling: touch для плавной инерционной прокрутки.

Мария Соколова, UX/UI дизайнер Работая над дизайн-системой для крупного банка, я столкнулась с интересной дилеммой: мобильное приложение использовало невидимые скроллбары, и клиент хотел сохранить этот паттерн в веб-версии. Когда мы внедрили скрытие скроллбаров, возникла неожиданная проблема — часть пользователей не понимала, что контент можно прокручивать. Мы провели A/B тестирование и нашли изящное решение: добавили тонкий, полупрозрачный индикатор прокрутки, который появлялся на секунду при загрузке страницы и при наведении курсора. Этого оказалось достаточно, чтобы дать пользователям подсказку о прокрутке, но сохранить минималистичный дизайн. Уровень вовлеченности вырос на 26%.

Условное отображение полосы прокрутки: практические кейсы

В некоторых случаях полное скрытие полосы прокрутки может негативно сказаться на удобстве использования. Более элегантное решение — реализовать условное отображение скроллбара, когда он появляется только при определенных действиях пользователя. 👆

Рассмотрим несколько практических кейсов с соответствующими решениями:

Кейс 1: Отображение скроллбара при наведении

Скроллбар появляется только при наведении курсора на область с прокруткой:

.hover-scrollbar {
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
transition: all 0.3s ease;
}

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

.hover-scrollbar:hover {
scrollbar-width: thin;
}

.hover-scrollbar:hover::-webkit-scrollbar {
width: 6px;
}

.hover-scrollbar:hover::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 3px;
}

Кейс 2: Отображение скроллбара во время активной прокрутки

Для этого кейса потребуется JavaScript в сочетании с CSS:

.scroll-active {
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}

.scroll-active::-webkit-scrollbar {
width: 0;
transition: width 0.3s ease;
}

.scroll-active.is-scrolling {
scrollbar-width: thin;
}

.scroll-active.is-scrolling::-webkit-scrollbar {
width: 6px;
}

.scroll-active.is-scrolling::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 3px;
}

JavaScript для отслеживания состояния прокрутки:

const scrollableElements = document.querySelectorAll('.scroll-active');

scrollableElements.forEach(element => {
let scrollTimer;

element.addEventListener('scroll', () => {
element.classList.add('is-scrolling');

clearTimeout(scrollTimer);
scrollTimer = setTimeout(() => {
element.classList.remove('is-scrolling');
}, 1000); // Скроллбар исчезает через 1 секунду после прекращения прокрутки
});
});

Кейс 3: Кастомный скроллбар с индикатором прогресса

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

.progress-scrollbar {
position: relative;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}

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

.progress-indicator {
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 0; /* Изначально высота 0 */
background-color: #007bff;
opacity: 0.7;
transition: opacity 0.3s ease;
}

.progress-indicator:hover {
opacity: 1;
width: 6px;
}

JavaScript для расчета прогресса прокрутки:

const scrollContainer = document.querySelector('.progress-scrollbar');
const progressIndicator = document.querySelector('.progress-indicator');

scrollContainer.addEventListener('scroll', () => {
const scrollTop = scrollContainer.scrollTop;
const scrollHeight = scrollContainer.scrollHeight;
const clientHeight = scrollContainer.clientHeight;

const scrollPercentage = (scrollTop / (scrollHeight – clientHeight)) * 100;
progressIndicator.style.height = `${scrollPercentage}%`;
});

Кейс 4: Адаптивное отображение в зависимости от устройства

На настольных компьютерах скроллбар скрыт, на мобильных устройствах отображается стандартный (так как на них скроллбар обычно не виден постоянно):

/* Базовые стили для всех устройств */
.adaptive-scrollbar {
overflow-y: scroll;
}

/* Стили для настольных устройств */
@media (min-width: 768px) {
.adaptive-scrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
}

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

При реализации условного отображения скроллбаров важно учитывать следующие аспекты:

• Доступность: проверьте, что пользователи с ограниченными возможностями могут понять, что контент можно прокручивать
• Производительность: частые DOM-манипуляции при скроллинге могут влиять на производительность, особенно на мобильных устройствах
• Консистентность: поведение интерфейса должно быть предсказуемым и не вызывать у пользователя когнитивной нагрузки
• Тестирование: проверьте работу решения на различных устройствах и в разных браузерах

Применение условного отображения скроллбаров позволяет найти баланс между эстетикой дизайна и удобством использования, что особенно важно для создания современных веб-интерфейсов.

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