переполнение

Это свойство является сокращением следующих свойств CSS:

• overflow-x
• overflow-y

/* Keyword values */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

/* Global values */
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, но всё ещё создаёт новый контекст форматирования. Блок элемента является контейнером прокрутки.

Варианты переполнения включают скрытие переполненного содержимого, включение полос прокрутки для просмотра переполненного содержимого или отображение содержимого, выходящего за пределы области отступа элемента в окружающую область, и их комбинации.

Следует учитывать следующие нюансы при использовании различных ключевых слов для overflow:

• Указание значения, отличного от visible (значение по умолчанию) или clip для overflow создаёт новый контекст форматирования блоков. Это необходимо по техническим причинам; если плавающая область пересекается с прокручиваемым элементом, содержимое будет принудительно перестраиваться после каждого шага прокрутки, что приведёт к медленной прокрутке.
• Для установки overflow для достижения желаемого эффекта, блочный элемент должен иметь заданную высоту (height или max-height) если переполнение вертикальное, заданную ширину (width или max-width) если переполнение горизонтальное, заданную величину блочного размера ((block-size или max-block-size) если переполнение в направлении блочного размера, или заданную величину размера по линии ((inline-size или max-inline-size) или white-space значение nowrap если переполнение в направлении по линии.
• Установка переполнения на visible в одном направлении (т. е. overflow-x или overflow-y) при отсутствии установки visible или clip в другом направлении приводит к тому, что значение visible ведёт себя как auto.
• Установка переполнения на clip в одном направлении при отсутствии установки visible или clip в другом направлении приводит к тому, что значение clip ведёт себя как hidden.
• Свойство JavaScript Element.scrollTop может использоваться для прокрутки содержимого в контейнере прокрутки, за исключением случаев, когда overflow установлено в clip.

overflow = 
  <'overflow-block'>{1,2}  

<overflow-block> = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto     

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

Чтобы позволить пользователям только с клавиатурой, не использующим Firefox, прокручивать контейнер, вам необходимо назначить ему tabindex с помощью tabindex="0". К сожалению, когда средство чтения с экрана сталкивается с этой остановкой табуляции, оно не имеет контекста, что это такое, и средство чтения с экрана, вероятно, объявит всё его содержимое. Назначение соответствующего роли WAI-ARIA (role="region", например) и удобочитаемого имени (через aria-label или aria-labelledby) может это смягчить.

HTML

<div>
  <code>visible</code>
  <p class="visible">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>hidden</code>
  <p class="hidden">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>clip</code>
  <p class="clip">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>scroll</code>
  <p class="scroll">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>auto</code>
  <p class="auto">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>overlay</code>
  <p class="overlay">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

CSS

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;
}

Результат

• overflow-x, overflow-y
• overflow-block, overflow-clip-margin, overflow-inline
• clip, display, text-overflow, white-space
• CSS overflow
• Области прокрутки только с клавиатурой на adrianroselli.com (2022)