overflow

Властивість-скорочення CSS overflow (надлишок) задає бажану поведінку для тих випадків, коли вміст не вміщається у батьківський елемент (переливається через край) в горизонтальному чи вертикальному напрямку.

Спробуйте його в дії

Властивості-складові

Ця властивість є скороченням для наступних властивостей CSS:

• overflow-x
• overflow-y

Синтаксис

/* Значення – ключові слова */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

/* Глобальні значення */
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: revert-layer;
overflow: unset;

Властивість overflow задається як одне чи два ключові слова – значення типу <overflow>. Якщо задано лише одне ключове слово, то overflow-x та overflow-y отримують однакове значення. Якщо задано два, то перше з них застосовується до overflow-x – у горизонтальному напрямку, а друге – до overflow-y – у вертикальному напрямку.

Значення

visible (видимий)

Вміст, що не вміщається, не обрізається і може бути видимим за межами рамки внутрішніх полів елемента. Рамка елемента не є контейнером прокрутки. Це усталене значення властивості overflow.

hidden (прихований)

Вміст, що не вміщається, обрізається в межах рамки внутрішніх полів елемента. Смуг прокручення немає, і обрізаний вміст не видимий (тобто є прихованим), але він все одно існує. Користувацькі агенти не додають смуги прокручення, а також не дозволяють користувачам переглядати вміст за межами обрізаної області за допомогою дій, подібних до перетягування на сенсорному екрані або використання колеса миші. Такий вміст може бути прокручений програмно (наприклад, за допомогою якірного посилання, переходу до прихованого елемента шляхом табуляції чи задання значення властивості scrollLeft або методу scrollTo()), і в такому випадку рамка елемента є контейнером прокручення.

clip (обрізати)

Вміст, що не вміщається, обрізається в межах краю обрізання надлишку елемента, котрий заданий за допомогою властивості overflow-clip-margin. Як наслідок, вміст переповнює рамку внутрішніх полів елемента на значення <length> властивості overflow-clip-margin, або на 0px, якщо ця властивість не задана. Вміст, що вміщається і лежить поза областю обрізання, не видимий, користувацькі агенти не додають смуги прокручення, а також не підтримується програмне прокручення. Не створюється новий контекст форматування. Для створення контексту форматування використовуйте overflow: clip вкупі з display: flow-root. Рамка елемента не є контейнером прокручення.

scroll (прокручувати)

Вміст, що не вміщається, обрізається в межах рамки внутрішніх полів елемента, але до нього можна докрутити за допомогою смуг прокручення. Користувацькі агенти показують такі смуги як у горизонтальному, так і в вертикальному напрямку, якщо задано лише одне значення, незалежно від того, чи є вміст, що переливається через край або обрізається. Таким чином, використання цього ключового слова може запобігти появі та зникненню смуг прокручення при зміні вмісту. Принтери все одно можуть друкувати вміст, що переповнюється. Рамка елемента є контейнером прокручення.

auto (автоматично)

Вміст, що не вміщається, обрізається в межах рамки внутрішніх полів елемента, але до нього можна докрутити. На відміну від scroll, користувацькі агенти показують смуги прокручення лише якщо вміст не вміщається, і усталено ці смуги приховані. Якщо вміст вписується в рамку внутрішніх полів елемента, то він виглядає так само, як і з ключовим словом visible, але все одно створює новий контекст форматування. Рамка елемента є контейнером прокручення.

Примітка: Ключове значення overlay є історичним псевдонімом auto. З overlay смуги прокручення малюються поверх вмісту, замість того, щоб займати простір.

Опис

Серед варіантів роботи з надлишком – його приховування, вмикання смуг прокручення для його перегляду та відображення вмісту, що виливається за край рамки елемента в навколишній простір, а також поєднання цих варіантів.

При використанні для overflow різних ключових слів слід мати на увазі наступні особливості:

• Задання overflow значення, відмінного від visible (усталеного) та clip, утворює новий контекст блокового форматування. Це необхідно з технічних причин; якщо зміщений елемент перетинається з елементом, що прокручується, то він примусово перерозставляє розриви рядків після кожного кроку прокручування, що призводить до повільного прокручування.
• Щоб налаштування overflow дало бажаний ефект, елемент блокового рівня повинен мати або задану висоту (height або max-height), або white-space зі значенням nowrap.
• Задання одної осі зі значенням visible (усталеним), а іншої з іншим значенням – призводить до того, що visible поводиться як auto.
• Властивість JavaScript Element.scrollTop може використовуватися для прокручення вмісту в контейнері прокручення, в тому числі коли overflow задано зі значенням hidden.

Формальне визначення

Формальний синтаксис

[ visible | hidden | clip | scroll | auto ]{1,2}

Приклади

Демонстрація результатів різних ключових слів overflow

HTML

<div>
  <code>visible</code>
  <p class="visible">
    Панграма - це фраза, що містить кожну букву алфавіту і є невідомою для
    відчайдушно-наївних ґаздинь.
  </p>
</div>

<div>
  <code>hidden</code>
  <p class="hidden">
    Панграма - це фраза, що містить кожну букву алфавіту і є невідомою для
    відчайдушно-наївних ґаздинь.
  </p>
</div>

<div>
  <code>clip</code>
  <p class="clip">
    Панграма - це фраза, що містить кожну букву алфавіту і є невідомою для
    відчайдушно-наївних ґаздинь.
  </p>
</div>

<div>
  <code>scroll</code>
  <p class="scroll">
    Панграма - це фраза, що містить кожну букву алфавіту і є невідомою для
    відчайдушно-наївних ґаздинь.
  </p>
</div>

<div>
  <code>auto</code>
  <p class="auto">
    Панграма - це фраза, що містить кожну букву алфавіту і є невідомою для
    відчайдушно-наївних ґаздинь.
  </p>
</div>

<div>
  <code>overlay</code>
  <p class="overlay">
    Панграма - це фраза, що містить кожну букву алфавіту і є невідомою для
    відчайдушно-наївних ґаздинь.
  </p>
</div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

div {
  margin: 2em;
  font-size: 1.2em;
}

p {
  width: 5em;
  height: 5em;
  border: dotted;
  margin-top: 0.5em;
}

div:nth-of-type(5),
div:nth-of-type(6) {
  margin-top: 200px;
}

p.visible {
  overflow: visible;
}

p.hidden {
  overflow: hidden;
}

p.clip {
  overflow: clip;
  overflow-clip-margin: 1em;
}

p.scroll {
  overflow: scroll;
}

p.auto {
  overflow: auto;
}

p.overlay {
  overflow: overlay;
}

Результат

Занепокоєння щодо доступності

Область прокрутного вмісту не може прокручуватись користувачем, в розпорядженні якого є лише клавіатура, окрім користувачів Firefox (котрий усталено дає змогу контейнерові такого змісту отримувати фокус за допомогою клавіатури).

Аби дати змогу користувачам лише клавіатури прокручувати такий контейнер не тільки у Firefox, розробникам слід задавати цьому контейнеру tabindex, вживши tabindex="0". На жаль, коли читач з екрана зустріне таку зупинку табуляції, то не матиме контексту для розуміння, що це таке, і оголосить увесь його вміст. Задання такому контейнерові відповідної ролі WAI-ARIA (role="region", наприклад) і доступного імені (за допомогою aria-label або aria-labelledby) може пом'якшити цю проблему.

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

Сумісність із браузерами

Дивіться також

• overflow-x, overflow-y
• overflow-block, overflow-clip-margin, overflow-inline
• clip, display, text-overflow, white-space
• Переповнення CSS
• Keyboard-only scrolling areas on adrianroselli.com (November 28, 2022)
• Області прокручення лише клавіатурою на adrianroselli.com (28 листопада 2022 року)