Скрытие скроллбаров в браузерах
Возникло такое пожелание от заказчика, скрыть скроллинг внизу и справа, которые всегда появляется по умолчанию. Для этого прописываем через CSS для тега BODY следующую команду.
body {
overflow: hidden
}
Чтобы скрыть отдельные полосы прокрутки используем следующие команды для тега HTML (работает только в FF и IE) в 2008 году:
html {
overflow-x : hidden; /*скрытие горизонтальной прокрутки*/
overflow-y : hidden /*скрытие вертикальной прокрутки*/
}
Что бы скрыть скролбар, но при этом иметь прокрутку блока колесиком мышки или свайпом, используем другой код:
.element::-webkit-scrollbar {
width : 0 !important /* Webkit */
}
.element {
-ms-overflow-style : none; /* IE10+ */
overflow : -moz-scrollbars-none; /* FireFox, но может не работать */
}
Более универсальное решение для скрытия скролбара, которое работает в 2019 году:
::-webkit-scrollbar { /* Webkit */
width : 0; /* ширина scrollbar'a */
background : transparent /* опционально */
}
html {
-ms-overflow-style : none; /* IE 10+ */
scrollbar-width : none /* Firefox */
}
Вообще нельзя прятать прокрутки в браузере. Разрешение может быть разным, скрывая прокрутку, вы будете терять часть пользователь с экранами маленьких разрешений, например мобильные устройства.
Источники: Hiding Vertical Scrollbars with Pure CSS in Chrome, IE (6+), Firefox, Opera, and Safari