Тег overflow-y у CSS: пояснення та приклади
Свойство overflow-y управляє відображенням вмісту блокового елемента по вертикалі, коли вміст не вміщається повністю і виходить за межі блоку зверху або знизу.
Синтаксис
overflow-y: auto | hidden | scroll | visible
Значення
- visible
- Відображається весь вміст елемента, навіть за межами встановленої висоти.
- hidden
- Відображається лише область всередині елемента, решта буде приховано.
- scroll
- Завжди додається вертикальна смуга прокрутки.
- auto
- Залежно від браузера. Головним чином, вертикальна смуга прокрутки додається лише за необхідності.
Приклад
<!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>Об'єктна модель
[window.]document.getElementById("elementID").style.overflowY