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

Узнайте, как использовать CSS для скрытия полосы прокрутки.

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

Добавить overflow: hidden;можно одновременно скрыть как горизонтальные, так и вертикальные полосы прокрутки.

Пример

body {
  overflow: hidden; /* Скрыть полосы прокрутки */
}

Попробуйте сами

Чтобы скрыть только вертикальную полосу прокрутки или только горизонтальную полосу прокрутки, используйте overflow-y или overflow-x:

Пример

body {
  overflow-y: hidden; /* Скрыть вертикальную полосу прокрутки */
  overflow-x: hidden; /* Скрыть горизонтальную полосу прокрутки */
}

Попробуйте сами

Обратите внимание,overflow: hidden Будет также удалена функциональность полосы прокрутки. Прокрутка внутри страницы невозможна.

Скрыть полосу прокрутки, но сохранить её функциональность

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

Пример

/* Скрыть полосу прокрутки для Chrome, Safari и Opera */
.example::-webkit-scrollbar {
  display: none;
}
/* Скрыть полосу прокрутки для IE, Edge и Firefox */
.example {
  -ms-overflow-style: none;  /* IE и Edge */
  scrollbar-width: none;  /* Firefox */
}

Попробуйте сами

Браузеры Webkit (например, Chrome, Safari и Opera) поддерживают нестандартные ::-webkit-scrollbar псевдоэлемент, который позволяет нам изменить вид полосы прокрутки браузера. Поддерживается IE и Edge -ms-overflow-style: поддерживается Firefox атрибут scrollbar-width Эти свойства позволяют нам скрыть полосу прокрутки, но сохранить её функциональность。

Соответствующие страницы

Учебное пособие:Переток CSS

Руководство:CSS свойство overflow