Узнать, как создать скрытие полосы прокрутки используя HTML, CSS.
Скрыть полосу прокрутки
Добавьте overflow: hidden;, чтобы скрыть как горизонтальную, так и вертикальную полосы прокрутки.
body {
overflow: hidden; /* Скрыть полосы прокрутки */
}
Попробуйте сами »
Чтобы скрыть только вертикальную полосу прокрутки или только горизонтальную полосу прокрутки, используйте overflow-y или overflow-x:
body {
overflow-y: hidden; /* Скрыть вертикальную полосу прокрутки */
overflow-x: hidden; /* Скрыть горизонтальную полосу прокрутки */
}
Попробуйте сами »
Обратите внимание, что overflow: hidden также удалит функциональность полосы прокрутки. Невозможно прокрутить страницу внутри.
Совет: чтобы узнать больше о свойстве overflow, перейдите в наш Учебник по CSS Overflow или Справочник по свойству CSS Overflow.
Скрыть полосы прокрутки, но сохранить функциональность
Чтобы скрыть полосы прокрутки, но при этом иметь возможность продолжать прокрутку, вы можете использовать следующий код:
/* Скрыть полосу прокрутки для 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, которое позволяет нам скрыть полосу прокрутки, но сохранить функциональность.