Как скрыть полосу прокрутки (скроллбар) с помощью CSS

Введение

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

Свойства CSS для скрытия полос прокрутки

• Свойство CSS overflow: hidden используется для скрытия вертикальной и горизонтальной полосы прокрутки элемента. Однако это свойство также влияет на способность элемента прокручиваться по вертикальной и горизонтальной оси.
• Свойство CSS overflow-y: hidden используется для скрытия вертикальной полосы прокрутки в элементе. Это свойство также влияет на способность элемента прокручиваться по вертикальной оси.
• Свойство CSS overflow-x: hidden используется для скрытия горизонтальной полосы прокрутки в элементе. Это свойство также влияет на способность элемента прокручиваться по горизонтальной оси.
• Полосу прокрутки на элементе можно скрыть, при этом сохранив возможность прокрутки, с помощью:
  • Псевдоселектора ::-webkit-scrollbar, поддерживаемого только браузерами webkit. В псевдоселекторе можно задать свойство display: none, скрывающее полосу прокрутки на элементе, но сохраняющее функцию прокрутки.
  • Свойства CSS -ms-overflow-style: none поддерживаемого только Edge и другими устаревшими браузерами, такими как IE.
  • Свойства CSS scrollbar-width: none, поддерживаемого Firefox.

Скрыть полосы прокрутки на конкретных элементах

Продемонстрируем, как скрыть полосы прокрутки с помощью CSS атрибутов, упомянутых выше.

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

В примере используется псевдоселектор ::-webkit-scrollbar, чтобы скрыть полосу прокрутки на элементе с классом scroll-container, сохранив функциональность.

.scroll-container::-webkit-scrollbar {
  display: none;
}

See the Pen

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

Свойство overflow: hidden применяется к элементу с классом scroll-container с max-height: 350px.

.scroll-container {
  background: white;
  padding: 2em;
  margin: auto;
  max-width: 450px;
  max-height: 350px;
  /* Это скрывает полосу прокрутки на элементе и влияет на его функцию прокрутки */
  overflow: hidden;
}

See the Pen

Свойства CSS скрывающие полосы прокрутки браузера

• Псевдоселектор -webkit-scrollbar также можно использовать для полос прокрутки в браузерах на базе WebKit. Однако хотя этот метод уже используется, до сих пор не стандартизирован. И, устареет, когда параметры полос прокрутки, предоставленные MDN, будут реализованы и поддерживаться во всех браузерах.
• Полоса прокрутки браузера можно скрыть, если к элементу body (корневому элементу) добавить CSS свойства overflow: hidden, overflow-y: hidden или overflow-x: hidden. Однако не рекомендуется применять их к базовому элементу body, так как это может помешать браузеру прокручивать страницу.

Скрытие полосы прокрутки в браузерах Webkit, таких, как Chrome, Safari, Edge и Firefox.

Продемонстрируем, как скрыть полосы прокрутки браузера с помощью CSS свойств, упомянутых выше.

Пример, приведённый ниже, демонстрирует, как скрыть полосу прокрутки браузера, не нарушая функциональности.

В этом примере используется псевдоселектор ::-webkit-scrollbar, чтобы скрыть полосу прокрутки на элементе body, сохранив при этом функциональность.

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

See the Pen

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

Свойство overflow: hidden применяется к элементу body.

body {
  border: 10px solid orange;
  margin: auto;
  max-width: 600px;
  font: 1em / 1.4 sans-serif;
  padding: 2em;
  display: grid;
  place-items: center;
  background: white;
  /* Это скрывает полосу прокрутки браузера, однако влияет на функцию прокрутки */
  overflow: hidden;
}

See the Pen

Заключение

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

• Руководство по стилизации скроллбара (полосы прокрутки) в CSS