Как сделать - скрыть полосу прокрутки
Узнайте, как скрыть полосы прокрутки с помощью CSS.
Как скрыть полосы прокрутки
Добавьте overflow: hidden;
, чтобы скрыть как горизонтальную, так и вертикальную полосу прокрутки.
Пример
body {
overflow: hidden; /* Hide scrollbars */
}
Чтобы скрыть только вертикальную полосу прокрутки или только горизонтальную полосу прокрутки, используйте overflow-y
или overflow-x
:
Пример
body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
Обратите внимание, что overflow: hidden
это также удалит функциональность полосы прокрутки. Прокрутка внутри страницы невозможна.
Совет. Чтобы узнать больше об этом overflow
свойстве, перейдите к нашему Учебному руководству CSS Overflow или Справочнику по свойствам CSS overflow .
Скрыть полосы прокрутки, но сохранить функциональность
Чтобы скрыть полосы прокрутки, но по-прежнему иметь возможность прокручивать, вы можете использовать следующий код:
Пример
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar
for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /*
IE and Edge */
scrollbar-width: none; /* Firefox */
}
Браузеры Webkit, такие как Chrome, Safari и Opera, поддерживают нестандартный ::-webkit-scrollbar
псевдоэлемент, который позволяет нам изменять внешний вид полосы прокрутки браузера. IE и Edge поддерживают это -ms-overflow-style:
свойство, а Firefox поддерживает scrollbar-width
свойство, позволяющее скрыть полосу прокрутки, но сохранить функциональность.