Overflow css hide scrollbars

overflow

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

Использование свойства overflow со значениями, отличными от visible , (значение, принятое по умолчанию), создаёт новый блочный контекст форматирования (en-US) . Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float’ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута scrollTop для соответствующего HTML-элемента, даже если overflow имеет значение hidden , элемент, возможно, придётся прокрутить.

• overflow-x (en-US): as specified, except with visible / clip computing to auto / hidden respectively if one of overflow-x (en-US) or overflow-y (en-US) is neither visible nor clip
• overflow-y (en-US): as specified, except with visible / clip computing to auto / hidden respectively if one of overflow-x (en-US) or overflow-y (en-US) is neither visible nor clip

Синтаксис

overflow =
[ (en-US) visible | (en-US) hidden | (en-US) clip | (en-US) scroll | (en-US) auto ] (en-US) (en-US)

overflow: visible overflow: hidden overflow: scroll overflow: auto overflow: inherit 

Значения

По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.

Контент обрезается, без предоставления прокрутки.

Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могут печатать переполненное содержимое.

Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.

Расширения Mozilla

Главным образом предназначен для внутреннего использования и для тем. Отключает прокрутку XML root элементов и , клавишами со стрелками и колесом мыши.

Примеры

p  width: 12em; height: 6em; border: dotted; overflow: visible; /* содержимое не обрезается */ > 

visible (default) Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p  overflow: hidden; /* полосы прокрутки не предоставляются */ > 

overflow: hidden Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p  overflow: scroll; /* всегда показывать полосы прокрутки */ > 

overflow: scroll Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p  overflow: auto; /* добавить полосы прокрутки, если это необходимо */ > 

overflow: auto Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Спецификации

Спецификация	Статус	Комментарий
CSS Overflow Module Level 3 Определение ‘overflow’ в этой спецификации.	Рабочий черновик	Changed syntax to allow one or two keywords instead of only one
CSS Box Model Определение ‘overflow’ в этой спецификации.	Кандидат в рекомендации	Без изменений
CSS Level 2 (Revision 1) Определение ‘overflow’ в этой спецификации.	Рекомендация	Initial definition.

Совместимость браузера

BCD tables only load in the browser

Firefox (Gecko) Примечания

Из-за Firefox 3.6 (Gecko 1.9.2), свойство overflow неверно применяется к элементам table-group ( , , ). Это поведение будет исправлено в следующих версиях.

Internet Explorer Примечания

Internet Explorer 4 — 6 увеличивает элемент с overflow:visible (значение по умолчанию), чтобы заполнить содержимое в нём. height/width действуют подобно min-height/min-width .

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

Found a content problem with this page?

This page was last modified on 17 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

How to Hide Scrollbars with CSS

If you don’t know how to hide scrollbars for major browsers with pure CSS, you are in the right place!

Hiding scrollbars is useful when the whole content is visible. To hide scrollbars from any element, you can use CSS code.

In this snippet, we will demonstrate how to remove a scrollbar from the and elements.

Let’s see an example and try to discuss each part of the code together.

Create HTML

body> div div div Lorem Ipsum is simply dummy text … div> div> div> body>

Add CSS

• Set the width and height properties for the «element» and «outer» classes.
• Set the position to «relative» and the overflow to «hidden» for the «outer» class. Also, add a border.
• Set the left property for the «inner» class and use the «absolute» value of the position property. Specify the overflow-x property with the «hidden» value and overflow-y with the «scroll» value.
• Add a simple rule for -Webkit- browsers.

.element, .outer < width: 300px; height: 300px; > .outer < border: 2px solid #666666; position: relative; overflow: hidden; > .inner < position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; > .inner::-webkit-scrollbar < display: none; >

Let’s bring the code parts together to see how it works!

Example of hiding the scrollbar from the element:

html> html> head> title>Title of the document title> style> .element, .outer < width: 300px; height: 300px; > .outer < border: 2px solid #666666; position: relative; overflow: hidden; > .inner < position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; > .inner::-webkit-scrollbar < display: none; > style> head> body> div class="outer"> div class="inner"> div class="element"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised n the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. div> div> div> body> html>

Result

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it

Another way to hide the scrollbar is to add the following code:

Now, let’s discuss how to remove a scrollbar from the tag.

The element is used to allow the users to enter text, give feedback, leave comments. By default, the element comes with a vertical scrollbar. It helps the user to enter and review their text by scrolling up and down.

We need to set the CSS overflow property to «hidden» so as to hide the scrollbar.

Below is an example, where we hide the scrollbar from the element:

Example of hiding the scrollbar from the element:

html> html> head> title>Title of the document title> style> textarea < overflow: hidden; > style> head> body> form> textarea rows="15" cols="30"> Enter your content. textarea> form> body> html>

Источник