Свойство overflow-y определяет, должен ли контент быть скрыт, виден или прокручиваться вертикально, когда он выходит за границы сверху или снизу от элемента.
Свойство overflow-yимеет четыре значения - visible, hidden, scroll, auto.
Если значение свойства overflow-y установлено в visible, значение overflow-x, по умолчанию, будет установлено в visible.
Если значение свойства overflow-y установлено в scroll, auto или hidden, значение свойства overflow-x будет установлено в auto.
| Значение по умолчанию | visible |
| Применяется | К блочным контейнерам, флекс- и грид-контейнерам. |
| Наследуется | Нет |
| Анимируемое | Нет |
| Версия | CSS3 |
| DOM синтаксис | object.style.overflowY = "auto"; |
Синтаксис
overflow-y: visible | hidden | scroll | auto | initial | inherit;Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
div.scroll {
background-color: #1c87c9;
color: #fff;
height: 60px;
width: 200px;
overflow-y: scroll;
}
</style>
</head>
<body>
<h2>Пример свойства overflow-y</h2>
<h3>Overflow-y: scroll</h3>
<div class="scroll">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов..</div>
</body>
</html>Пример со значением "visible":
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
div.visible {
background-color: #8ebf42;
color: #666;
height: 40px;
width: 200px;
overflow-y: visible;
}
</style>
</head>
<body>
<h2>Пример свойства overflow-y</h2>
<h3>Overflow-y: visible</h3>
<div class="visible">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
</body>
</html>Пример со значением "hidden":
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
div.hidden {
background-color: #1c87c9;
color: #fff;
height: 60px;
width: 200px;
overflow-y: hidden;
}
</style>
</head>
<body>
<h2>Пример свойства overflow-y</h2>
<h3>Overflow-y: hidden</h3>
<div class="hidden">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
</body>
</html>Пример со значением "auto":
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
div.auto {
background-color: #1c87c9;
color: #fff;
height: 60px;
width: 200px;
overflow-y: auto;
}
</style>
</head>
<body>
<h2>Пример свойства overflow-y</h2>
<h3>Overflow-y: auto</h3>
<div class="auto">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
</body>
</html>Рассмотрим пример со всеми значениями:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
div.scroll {
background-color: #8ebf42;
height: 70px;
width: 150px;
overflow-y: scroll;
}
div.hidden {
background-color: #8ebf42;
height: 70px;
width: 150px;
overflow-y: hidden;
}
div.auto {
background-color: #8ebf42;
height: 70px;
width: 150px;
overflow-y: auto;
}
div.visible {
background-color: #8ebf42;
height: 70px;
width: 150px;
overflow-y: visible;
}
</style>
</head>
<body>
<h2>Пример свойства overflow-y</h2>
<h3>overflow-y: scroll</h3>
<div class="scroll">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
<h3>overflow-y: hidden</h3>
<div class="hidden">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
<h3>overflow-y: auto</h3>
<div class="auto">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
<h3>overflow-y: visible</h3>
<div class="visible">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| visible | Контент не срезается и отображается та часть, которая выходит за границы сверху или снизу от блока. Значение по умолчанию. |
| hidden | Контент срезается таким образом, чтобы поместится внутри блока по вертикали. Полоса прокрутки не добавляется. |
| scroll | Контент срезается таким образом, чтобы поместится внутри блока по вертикали. Полоса прокрутки добавляется, чтобы увидеть оставшуюся часть контента. |
| auto | Контент срезается таким образом, чтобы поместится внутри блока по вертикали. Зависит от браузера. Если контент выходит за границы, добавляется полоса прокрутки. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| 1.0+ | 12.0+ | 1.5+ | 3.0+ | 9.5+ |
Практикуйте свои знания
Что делает свойство CSS 'overflow-y'?
Правильный!
Неправильно!