| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0 + | 1.0 + | 9.5 + | 3.0 + | 1.5 + | 2.1 + | 2.0 + |
Коротка інформація
| Значення за умовчанням | visible |
|---|---|
| успадковується | Ні |
| Застосовується | До блоковим елемента |
| Відсотковий запис | незастосовні |
| Посилання на специфікацію | http://www.w3.org/TR/css3-box/#overflow-y |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Властивість overflow-y управляє відображенням змісту блокового елемента по вертикалі, якщо контент цілком не поміщається і виходить за область зверху чи знизу від блоку.
Синтаксис
overflow-y: auto | hidden | scroll | visible
Значення
- visible
- Відображається весь зміст елемента, навіть за межами встановленої висоти.
- hidden
- Відображається лише область всередині елемента, інше буде приховано.
- scroll
- Завжди додається вертикальна смуга прокрутки.
- auto
- В залежності від браузера. В основному, вертикальна смуга прокрутки додається тільки при необхідності.
Приклад
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
overflow-y </title>
<style>
body {overflow-y: hidden; /* Прибираємо вертикальну смугу прокрутки */ } .layer {width: 300px; /* Ширина блоку */ height: 150px; /* Висота блоку */ padding: 5px; /* Поля навколо тексту */ } </style>
</head>
<body>
<div class="layer">
<h2>
Duis te feugifacilisi </h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</div>
</body>
</html>
Результат даного прикладу показаний на рис. 1.
Об'єктна модель
[window.] Document.getElementById (" elementID "). style.overflowY