css властивість overflow-y
Властивість overflow-y вказує, що зробити для переповненого по вертикалі елемента:
- Обрізати вміст, що поза межами елемента, без можливості його перегляду.
- Показати вміст, що поза межами елемента.
- Обрізати вміст, що поза межами елемента та для можливості перегляду обрізаного тексту, показати горизонтальну смугу прокручування.
В стані чернетки, існують три ключові слова, які можна буде використовувати в якості значень для overflow: no-display, no-content, clip.
Для того, щоб побачити результат дії overflow-y, разом з ним для елементу треба прописати також висоту(height або max-height), або задати значення nowrap для white-space.
Ви можете також використовувати властивість overflow для скороченого запису overflow-x i overflow-y.
Синтаксис
overflow-y: visible|hidden|scroll|auto|initial|inherit;Властивість overflow-y може отримувати 6 значень:
visibleВідображає ввесь вміст елемента, навіть вміст, що за межами елемента. Без задання.
hiddenВідображається лише область всередині елемента, все, що поза межами контейнера, буде обрізано.
scrollВертикальна смуга прокручування буде завжди відображена.
autoВертикальна смуга прокручування з'явиться, тільки при необхідності.
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента.
| Значення без задання: | visible |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.overflowY="scroll" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| overflow-y | 4.0 |
9.0 |
3.5 |
3.0 |
9.5 |
| Переглядач | |||
|---|---|---|---|
| overflow-y | 1.0 |
1.0 |
3.0 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація роботи властивості
Приклад використання властивості overflow-y.
Обрізання вмісту в елементі <div>
div {
overflow-y: hidden;
}