• Главная  
• Блог  
• Скрытие скроллбаров в браузерах

Скрытие скроллбаров в браузерах

Возникло такое пожелание от заказчика, скрыть скроллинг внизу и справа, которые всегда появляется по умолчанию. Для этого прописываем через 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