Как на сайте убрать полосу прокрутки


Как убрать полосы прокрутки? | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 6.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Убрать горизонтальные или вертикальные полосы прокрутки со страницы, не зависимо от объёма страницы.

Решение

Перед тем как убрать полосы прокрутки с веб-страницы, подумайте, действительно ли вам это так необходимо. Отсутствие возможности прокрутки содержимого документа создает трудности посетителям сайта для просмотра информации. Если же существует острая необходимость построения дизайнерских изысков или желание создать своим читателям трудности, то вперед. Но вас предупреждали!

Способ основан на использовании свойства overflow, которое добавляется к селектору HTML, как показано в примере 1.

Пример 1. Страница без полос прокрутки

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Полосы прокрутки</title> <style> html { overflow: hidden; } div { height: 2000px; } </style> </head> <body> <div>Бла-бла</div> </body> </html>

В данном примере используется значение hidden, которое «обрезает» весь контент выходящий за рамки элемента.

Также можно использовать свойство overflow-x, чтобы скрыть только горизонтальную полосу прокрутки и overflow-y — для сокрытия вертикальной полосы. В примере 2 показано добавление слоя с минимальной шириной 800 пикселов. При уменьшении окна браузера до этой величины, слой перестаёт менять свои размеры и появляется горизонтальная полоса прокрутки. С помощью свойства overflow-x полосы прокрутки скрываются.

Пример 2. Нет горизонтальной полосы прокрутки

HTML5CSS3IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Полосы прокрутки</title> <style> html { overflow-x: hidden; } div { min-width: 800px; /* Минимальная ширина */ background: #fc0; /* Цвет фона */ padding: 10px; /* Поля вокруг текста */ } </style> </head> <body> <div>Бла-бла</div> </body> </html>

Свойства overflow-x и overflow-y входят в спецификацию CSS3 и не проходят валидацию при проверке стилей на CSS2.1.

html - Как удалить полосу прокрутки из окна браузера

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

Как скрыть полосы прокрутки с помощью CSS


Узнайте, как скрыть полосы прокрутки с помощью CSS.


Как скрыть полосы прокрутки

Добавить переполнение: скрыто; , чтобы скрыть как горизонтальная и вертикальная полоса прокрутки.

Чтобы скрыть только вертикальную полосу прокрутки или только горизонтальную полосу прокрутки, используйте overflow-y или overflow-x :

Пример

body {
overflow-y: скрыто; / * Скрыть вертикальную полосу прокрутки * /
переполнение-x: скрыто; / * Скрыть горизонтальную полосу прокрутки * /
}

Попробуй сам "

Обратите внимание, что overflow: hidden также удалит функциональность полосы прокрутки.Прокрутка внутри страницы невозможна.

Совет: Чтобы узнать больше о свойстве overflow , перейдите в нашу справку по свойствам CSS overflow.


Скрыть полосы прокрутки, но сохранить функциональность

Чтобы скрыть полосы прокрутки, но по-прежнему иметь возможность прокрутки, вы можете использовать следующий код:

Пример

/ * Скрыть полосу прокрутки для Chrome, Safari и Opera * /
.example :: - webkit-scrollbar {
display: none;
}

/ * Скрыть полосу прокрутки для IE, Edge и Firefox * /
.пример {
-ms-overflow-style: нет; / * IE и Edge * /
ширина полосы прокрутки: нет; / * Firefox * /
}

Попробуй сам " Браузеры

Webkit, такие как Chrome, Safari и Opera, поддерживают нестандартный псевдоэлемент :: - webkit-scrollbar , который позволяет нам изменять внешний вид полосы прокрутки браузера. IE и Edge поддерживают свойство -ms-overflow-style: , а Firefox поддерживает свойство scrollbar-width , которое позволяет нам скрыть полосу прокрутки, но сохранить функциональность.



.

html - Удалить полосы прокрутки из браузера

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
.

javascript - Как отключить полосы прокрутки страницы?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий