Как скрыть полосу прокрутки
- Предыдущая страница Пользовательская прокрутка
- Следующая страница Показать/принудительно показать полосу прокрутки
Узнайте, как использовать 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
- Предыдущая страница Пользовательская прокрутка
- Следующая страница Показать/принудительно показать полосу прокрутки