Css убрать полосу прокрутки: Как скрыть полосы прокрутки при помощи CSS?

Содержание

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

Вы здесь

Главная → Блог → CSS → Как скрыть полосы прокрутки?

Раздел:

И так, сегодня у вас появилась необходимость убрать горизонтальные и вертикальные полосы прокрутки. Давайте рассмотрим ситуации, в которых может возникать такая задача и основные способы ее решения.

Убрать полосы прокрутки со страницы при помощи CSS

Метод основан на использовании CSS свойства overflow, которое определяет, как будет отображаться содержимое блочной структуры, если оно (содержимое) превышает размеры родительского элемента.

Из всех возможных значений данного свойства нас интересует значение «hidden»:

overflow: hidden;

которое задает браузеру инструкцию «отобразить поместившийся контент, что не влезло — скрыть»

Применив это свойство к селектору body или html можно добиться исчезновения полос прокрутки.

Рассмотрим пример:

HTML:

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title> Убираем скролл </title>
  </head>
<body>
      <div></div>
</body>
</html>

CSS:

div { height:  2800px; }

Как видим, у нас есть девственно-чистая страница высотой 2800px с полосой вертикального скролла. Теперь добавим в каскадную таблицу стилей строчку:

html { overflow:  hidden; }

и обновим страничку.

Также можно применять свойства overflow-y (overflow-x) для управления отображением не вместившегося контента только по вертикали (горизонтали). Т.е., исходя из рассматриваемого контекста, можно скрыть только вертикальную (горизонтальную) полосу прокрутки.

Важно!!!

CSS не скрывает полосы прокрутки, а всего лишь создает браузеру условия, при которых нет необходимости их выводить. Это значит, что вместе с скролл-барами у вас пропадет и скролл-функция, и «не вмещающийся контент» будет недоступен для просмотра!
Перед использованием данного приема, хорошо подумайте — нужен ли вам он вообще. Ведь маленький недочет и можно потерять полезную информацию из поля зрения.
Наиболее оправданным будет применение overflow: hidden в следующих случаях:
- Вывод маленькой страницы, которая априори поместится полностью на экране (например, страницы ошибки, страницы авторизации и т. д. ).
- Вывод небольших web-форм
- Скрытие полос прокрутки при создании собственного каcтомного скролл-бара.

Послесловие

Чаще всего к этой теме web-мастера приходят тогда, когда яркий авторский дизайн сайта сходит на ноль из-за «приевшегося» стандартного вида системного скролл-бара. Да, бывает и такое. В таком случае, существует несколько вариантов решения проблемы:

Кастомизовать системные полосы прокрутки.
На сегодняшний день более-менее гибкую настройку позволяют выполнять браузеры на базе webkit.

В нашем распоряжении есть достаточно широкий набор псевдоэлементов, отвечающих за структурные части скролл-баров, и псевдоселекторов, помогающих кастомизировать внешний вид структурных частей в различных состояниях.

Преимущества:

Системный скролл гораздо производительнее JavaScript-симуляторов, реализует все «фишки» операционной системы устройства, сохраняется кросс-платформенность.

Недостатки:

Нет никаких гарантий, что браузеры на других (не webkit) движках смогут осознать всю «тонкость душевной организации» вашего сайта (кастомизация скорее всего не произойдет).

Скрыть системные полосы прокрутки, и использовать

JavaScript-эмулятор.
Казалось бы, вполне логично: хочешь кросс-браузерности — используй JavaScript. Но в данном случае это жестокое заблуждение.

Дело в том, что в этом случае JavaScript приходится обрабатывать системные события связанные со скроллом. А интерфейс этих событий значительно отличается для каждого браузера, не говоря уже о разных платформах. Учтите эту информацию при использовании «готовых» j-скроллеров (особенно, когда на странице источника заявляют о полной «кросс» без подтверждения).

Преимущества

Безграничная по глубине кастомизация.

Недостатки

Производительность эмулятора ниже производительности системной прокрутки.

Нет гарантий кросс-браузерности и кросс-платформности.

Тема авторского универсального скролла будет более подробно рассмотрена в отдельной статье. Успешных Вам проектов!!!

Ключевые слова:

CSS приемы

CSS база. Или что должен знать каждый верстальщик

Уровень сложности:

Средний

Еще интересное

Как спрятать scrollbar в div и отставить возможность скроллинга? — Хабр Q&A

Если делать как посоветовали выше, то пострадают мобильные браузеры. У них скролл не занимает место, как на десктопах, поэтому текст будет уходить за правую границу.

Есть еще одно решение:

/* хром, сафари */
.element::-webkit-scrollbar { width: 0; }
/* ie 10+ */
.element { -ms-overflow-style: none; }
/* фф (свойство больше не работает, других способов тоже нет)*/
.element { overflow: -moz-scrollbars-none; }

Отсюда: hiding-vertical-scrollbars-with-pure-css-in-chrome…

Ответ написан более трёх лет назад

Комментировать

100% рабочий вариант Chrome, Safari, IE и т.

.elem {
      overflow: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
}
.elem::-webkit-scrollbar {
      width: 0;
      height: 0;
}

Ответ написан более года назад

jsfiddle.net/H8xfD/ Пользуйтесь, но при условии что ширина известна. Камент выше 100% правильный.

Ответ написан

более трёх лет назад

И надеяться потом, что человек догадается о возможности прокрутки? Или свой скроллбар нарисуете?

Ответ написан более трёх лет назад

scrollbar-width: none; для мозилы
::-webkit-scrollbar для остальных

Ответ написан 2020, в 09:03″>

более двух лет назад

Комментировать

В стиль — overflow:hidden, а события колёсика придётся самому обрабатывать.

Тут подробно расписаны другие варианты.

Ответ написан более трёх лет назад

Попробуйте www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

Ответ написан

более трёх лет назад

Комментировать

Что если отрицательный правый margin, и overflow:hidden у родителя.

Ответ написан 2012, в 23:56″> более трёх лет назад

Комментировать

Есть хороший вариант:

<div>
	<div>
		Тут контент
	</div>
</div>

.div1 {
	width: 300px;
	height: 500px;
	overflow: hidden;
}
.div2 {
	overflow-y: scroll;
	max-height: 100%;
	width: 100%;
	padding-right: 45px;
	background: lightpink;
}

Ответ написан более трёх лет назад

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

❮ Назад Далее ❯

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

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

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

Пример

body {
переполнение: скрыто; /* Скрыть полосы прокрутки */
}

Попробуйте сами »

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

Пример

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

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

Попробуйте сами »

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

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

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

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

Пример

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

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

Попробуйте сами »

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

❮ Предыдущий Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

8 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To Примеры
Примеры SQL
Примеры Python
Примеры W3.

CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery2

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Как создать пользовательскую полосу прокрутки

❮ Назад Далее ❯

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

Пользовательские полосы прокрутки

Попробуйте сами »

Примечание: Пользовательские полосы прокрутки не поддерживаются в Firefox или в Edge, предыдущая версия 79.

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

Chrome, Edge, Safari и Opera поддерживают нестандартный псевдоэлемент ::-webkit-scrollbar , который позволяет нам изменять внешний вид полосы прокрутки браузера.

В следующем примере создается тонкая (шириной 10 пикселей) полоса прокрутки с серой дорожкой/полосой. цвет и темно-серая (#888) ручка:

Пример

/* ширина */
::-webkit-scrollbar {
width: 10px;
}

/* Трек */
::-webkit-scrollbar-track {
background: #f1f1f1;
}

/* Ручка */
::-webkit-scrollbar-thumb {
background: #888;
}

/* Ручка при наведении */
::-webkit-scrollbar-thumb:hover {
фон: #555;
}

Попробуйте сами »

В этом примере создается полоса прокрутки с тенью:

Пример

/* ширина */
::-webkit-scrollbar {
width: 20px;
}

/* Трек */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px серый;
border-radius: 10px;
}

/* дескриптор */
::-webkit-scrollbar-thumb {
фон: красный;
Радиус границы: 10 пикселей;
}

Попробуйте сами »

Селекторы полосы прокрутки

Для браузеров webkit вы можете использовать следующие псевдоэлементы для настройки полосы прокрутки браузера:

::-webkit-scrollbar полоса прокрутки.
::-webkit-scrollbar-button кнопки на полосе прокрутки (стрелки вверх и вниз).
::-webkit-scrollbar-thumb перетаскиваемый маркер прокрутки.
::-webkit-scrollbar-track дорожка (индикатор выполнения) полосы прокрутки.
::-webkit-scrollbar-track-piece дорожка (индикатор выполнения), НЕ закрытая ручкой.
::-webkit-scrollbar-corner нижний угол полосы прокрутки, где и горизонталь, и вертикальные полосы прокрутки встречаются.
::-webkit-resizer перетаскиваемый маркер изменения размера, который появляется в нижнем углу некоторых элементов.

❮ Предыдущий Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

8 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.

Css убрать полосу прокрутки: Как скрыть полосы прокрутки при помощи CSS?

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

Убрать полосы прокрутки со страницы при помощи CSS

Послесловие

Как спрятать scrollbar в div и отставить возможность скроллинга? — Хабр Q&A

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

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

Пример

Пример

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

Пример

ВЫБОР ЦВЕТА

Лучшие учебники

Основные примеры

FORUM | О

Как создать пользовательскую полосу прокрутки

Пользовательские полосы прокрутки

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

Пример

Пример

Селекторы полосы прокрутки

ВЫБОР ЦВЕТА

Лучшие учебники

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

Рубрики

Рубрики