Как скрыть полосу прокрутки css но оставить прокрутку

Полоса прокрутки часто мешает дизайну: нарушает выравнивание элементов, создаёт визуальный шум и может конфликтовать с адаптивной вёрсткой. Однако удаление её не означает отказ от прокрутки контента. В CSS есть несколько способов сохранить функциональность скроллинга, скрыв при этом саму полосу прокрутки.

Для скрытия полосы прокрутки на блоке с overflow: scroll или overflow: auto можно использовать псевдокласс ::-webkit-scrollbar, который доступен в браузерах на движке Blink (Chrome, Edge, Opera). Достаточно прописать display: none или задать нулевую ширину: ::-webkit-scrollbar { width: 0; height: 0; }. Контент останется прокручиваемым, но визуального индикатора прокрутки не будет.

В Firefox поддержка собственных стилей полосы прокрутки ограничена. Здесь применяется свойство scrollbar-width: none;, а также overflow: scroll; для активации прокрутки. Чтобы метод работал корректно, дополнительно используется -ms-overflow-style: none; для совместимости с Internet Explorer, если поддержка этого браузера ещё актуальна.

Скрытие скроллбара на мобильных устройствах требует особого внимания. Например, в iOS Safari полоса скрывается автоматически при использовании overflow: scroll внутри элементов с фиксированной высотой. Однако для стабильности поведения рекомендуется добавить -webkit-overflow-scrolling: touch;, чтобы сохранить инерционную прокрутку.

Скрытие горизонтальной полосы прокрутки при сохранении прокрутки по оси X

Чтобы скрыть горизонтальную полосу прокрутки, но сохранить возможность прокрутки содержимого по оси X, примените сочетание CSS-свойств, исключающее отображение scroll bar без ограничения скроллинга.

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

overflow-x: scroll;
overflow-y: hidden;
scrollbar-width: none; /* для Firefox */

Дополнительно для WebKit-браузеров (Chrome, Safari) потребуется:

::-webkit-scrollbar {
display: none;
}

Важно: элемент должен иметь ограниченную ширину (например, с помощью max-width или width), иначе горизонтальная прокрутка не появится. Примерно так:

.scroll-container {
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
scrollbar-width: none;
}
.scroll-container::-webkit-scrollbar {
display: none;
}

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

<div class="scroll-container">
<div style="width: 2000px;">...контент...</div>
</div>

Таким образом, скролл по оси X работает, но полоса прокрутки не отображается ни в одном из популярных браузеров.

Удаление вертикального скроллбара с сохранением прокрутки по оси Y

Чтобы скрыть вертикальную полосу прокрутки, но при этом сохранить возможность прокрутки контента по оси Y, используйте следующие методы:

Использование overflow-y: scroll вместе с -ms-overflow-style и scrollbar-width:
```
selector {
overflow-y: scroll;
-ms-overflow-style: none;      /* IE и Edge */
scrollbar-width: none;         /* Firefox */
}
```
Также требуется скрыть скроллбар для WebKit-браузеров:
```
selector::-webkit-scrollbar {
display: none;
}
```
Проверка условий:

Контейнер должен иметь фиксированную высоту или ограничение по высоте, иначе вертикальная прокрутка не активируется:
```
selector {
max-height: 400px;
overflow-y: scroll;
}
```
Избегание нестабильного поведения:

Не используйте overflow: hidden – это полностью отключает прокрутку. Также не применяйте отрицательные отступы или абсолютное позиционирование scrollbar-областей – это нарушает доступность и может вызвать баги в мобильных браузерах.
Тестирование:

Проверяйте результат в разных браузерах: Chrome, Firefox, Safari, Edge. Особенно учитывайте различия в рендеринге скроллбаров между Windows и macOS.

Использование свойства overflow для сокрытия полос прокрутки

Чтобы скрыть полосу прокрутки, сохранив возможность прокрутки содержимого, применяйте сочетание свойств overflow, overflow-x или overflow-y в зависимости от направления прокрутки. Например, overflow: scroll активирует прокрутку, но отображает полосы. Чтобы убрать их, используйте overflow: hidden на одном уровне и добавьте прокрутку внутреннему элементу.

Практический подход: оберните прокручиваемый блок во внешний контейнер с overflow: hidden, а внутреннему элементу присвойте overflow: scroll и нужную высоту или ширину. Это позволяет содержимому прокручиваться без отображения полосы:

<div style="overflow: hidden;">
<div style="height: 200px; overflow-y: scroll;">
...контент...
</div>
</div>

Для WebKit-браузеров используйте ::-webkit-scrollbar, чтобы полностью скрыть полосу, не отключая прокрутку:

div::-webkit-scrollbar {
display: none;
}

Дополнительно добавьте -ms-overflow-style: none; и scrollbar-width: none; для поддержки Internet Explorer и Firefox:

div {
-ms-overflow-style: none;
scrollbar-width: none;
}

Комбинация этих приёмов позволяет скрыть полосу прокрутки на всех основных браузерах при сохранённой возможности прокрутки контента.

Скрытие скроллбара с помощью псевдоэлементов в WebKit-браузерах

В браузерах на движке WebKit (Chrome, Safari, новые версии Edge) для управления отображением полосы прокрутки применяются специфичные псевдоэлементы. Чтобы полностью скрыть скроллбар, но сохранить возможность прокрутки, используется псевдоэлемент ::-webkit-scrollbar.

Пример базового CSS-кода:

/* Скрытие скроллбара в WebKit-браузерах */
.element::-webkit-scrollbar {
display: none;
}

Этот подход применим только к элементам с явно заданной прокруткой, например, при overflow: auto или overflow: scroll. Без этого условия прокрутка не активируется, даже если контент превышает размеры контейнера.

Также можно использовать псевдоэлементы для более тонкой настройки внешнего вида прокрутки, полностью имитируя её отсутствие:

.element::-webkit-scrollbar {
width: 0;
height: 0;
}

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

Важно протестировать решение на мобильных устройствах: в некоторых случаях скрытие скроллбара может повлиять на восприятие прокрутки пользователем. Оптимальный вариант – комбинировать ::-webkit-scrollbar с -ms-overflow-style: none и scrollbar-width: none для широкой совместимости.

Методика скрытия полосы прокрутки с помощью scrollbar-width в Firefox

Для управления отображением полосы прокрутки в Firefox используется свойство scrollbar-width. Оно работает исключительно в этом браузере и позволяет полностью скрыть полосу, не отключая саму прокрутку.

Применение: свойство применяется к элементу с установленной прокруткой, например, с overflow: auto или overflow: scroll.
Синтаксис: scrollbar-width: none;
Поддержка: работает только в Firefox версии 64 и выше.

Пример использования:

div.scroll-container {
overflow: auto;
scrollbar-width: none;
}

После применения scrollbar-width: none полоса прокрутки исчезает визуально, но возможность прокрутки сохраняется. Это особенно полезно в интерфейсах, где прокрутка управляется кастомными средствами (например, через колесо мыши или тач-жесты).

Важное замечание:

Для кроссбраузерной поддержки рекомендуется дополнять методику другими решениями (например, ::-webkit-scrollbar для Chrome и Safari).
Элемент должен иметь ограниченную высоту или ширину, чтобы прокрутка была активна. Без переполнения полоса не появится, и свойство не будет иметь эффекта.

Создание кастомного скролла поверх скрытого системного

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

Первый шаг – скрытие стандартной полосы прокрутки. Это можно сделать с помощью свойства overflow и установки его значения в hidden для соответствующего контейнера. Например:


.container {
overflow: hidden;
}

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

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


.container {
overflow: scroll;
}
.container::-webkit-scrollbar {
width: 8px;
}
.container::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
.container::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
}

В данном примере задаётся ширина полосы прокрутки, а также стилизуются элементы полосы: сама полоса, её «ползунок» (thumb) и трек. Эти элементы можно полностью кастомизировать по своему усмотрению – от цвета до углов скруглений.

Следующий шаг – добавление анимации для плавности прокрутки. Это можно сделать с помощью свойства scroll-behavior. Например:


.container {
scroll-behavior: smooth;
}

Это создаст плавную прокрутку для пользователя, когда он будет использовать кастомную полосу прокрутки.

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

Пример с использованием JavaScript:


const container = document.querySelector('.container');
container.addEventListener('scroll', function() {
const scrollTop = container.scrollTop;
const scrollHeight = container.scrollHeight;
const clientHeight = container.clientHeight;
const scrollRatio = scrollTop / (scrollHeight - clientHeight);
// Логика для обновления кастомного скролла в зависимости от прокрутки
});

Этот код позволяет отслеживать текущую позицию прокрутки и динамически изменять стиль или анимацию кастомной полосы прокрутки в зависимости от положения контента.

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

Вопрос-ответ:

Как можно скрыть полосу прокрутки, но оставить возможность прокручивать страницу?

Чтобы скрыть полосу прокрутки в CSS, при этом не отключая прокрутку, можно использовать свойство `overflow`. Для этого достаточно задать элементу стиль `overflow: hidden` для скрытия полосы, но оставлять прокрутку активной с помощью других настроек. Пример: если элемент имеет фиксированную высоту и содержимое, которое выходит за пределы, можно использовать стиль `overflow: auto` или `overflow: scroll`, чтобы скрыть саму полосу прокрутки, но оставить возможность прокрутки через колесо мыши или нажатия клавиш.