Как убрать полосы прокрутки?
Убрать горизонтальные или вертикальные полосы прокрутки со страницы, не зависимо от объёма страницы.
Решение
Перед тем как убрать полосы прокрутки с веб-страницы, подумайте, действительно ли вам это так необходимо. Отсутствие возможности прокрутки содержимого документа создает трудности посетителям сайта для просмотра информации. Если же существует острая необходимость построения дизайнерских изысков или желание создать своим читателям трудности, то вперед. Но вас предупреждали!
Способ основан на использовании свойства overflow , которое добавляется к селектору HTML, как показано в примере 1.
Пример 1. Страница без полос прокрутки
HTML5 CSS2.1 IE Cr Op Sa Fx
Полосы прокрутки html < overflow: hidden; >div Бла-бла В данном примере используется значение hidden , которое «обрезает» весь контент выходящий за рамки элемента.
Также можно использовать свойство overflow-x , чтобы скрыть только горизонтальную полосу прокрутки и overflow-y — для сокрытия вертикальной полосы. В примере 2 показано добавление слоя с минимальной шириной 800 пикселов. При уменьшении окна браузера до этой величины, слой перестаёт менять свои размеры и появляется горизонтальная полоса прокрутки. С помощью свойства overflow-x полосы прокрутки скрываются.
Пример 2. Нет горизонтальной полосы прокрутки
HTML5 CSS3 IE Cr Op Sa Fx
Полосы прокрутки Бла-бла Свойства overflow-x и overflow-y входят в спецификацию CSS3 и не проходят валидацию при проверке стилей на CSS2.1.
Как скрыть скроллбар?
Сегодня узнаем, как можно с помощью CSS скрыть полосу прокрутки.
body < overflow: hidden; /* Скрываем scrollbars */ >
Чтобы скрыть только вертикальную или только горизонтальную полосу прокрутки, можно использовать:
body < overflow-y: hidden; /* Скрываем вертикальный scrollbar */ overflow-x: hidden; /* Скрываем горизонтальный scrollbar */ >
Скрываем скроллбар, но сохраняем возможность прокрутки
Чтобы скрыть скроллбар, но сохранить возможность скролить содержимое, можно использовать следующий код:
/* Скрываем scrollbar для Chrome, Safari и Opera */ .example::-webkit-scrollbar < display: none; >/* Скрываем scrollbar для IE, Edge и Firefox */ .example < -ms-overflow-style: none; /* IE и Edge */ scrollbar-width: none; /* Firefox */ >
Скрытие скроллбаров в браузерах
Возникло такое пожелание от заказчика, скрыть скроллинг внизу и справа, которые всегда появляется по умолчанию. Для этого прописываем через CSS для тега BODY следующую команду.
body
Чтобы скрыть отдельные полосы прокрутки используем следующие команды для тега 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 */ >Вообще нельзя прятать прокрутки в браузере. Разрешение может быть разным, скрывая прокрутку, вы будете терять часть пользователь с экранами маленьких разрешений, например мобильные устройства.
Как убрать полосу прокрутки css
У нас есть вертикальная и горизонтальная полосы прокрутки. Можно убрать их как по отдельности, так и сразу. Ниже свойства который нужно добавить блоку в том или ином случае.
overflow: hidden; overflow-y: hidden; /*для вертикального*/ overflow-x: hidden; /*для горизонтального*/