CSS свойство overflow-y

Определение и применение

CSS свойство overflow-y указывает, что произойдёт, если содержимое переполняет верхний, либо нижний край элемента.

Попробуйте значения overflow-y

Содержимое шире и выше блока. Сравните обрезку и доступность прокрутки. При настройке одной оси другая может вычисляться как auto; полосы прокрутки зависят от системы.

Значение свойства

overflow-y: visible

HTML и CSS примера
HTML
<div class="stage">
  <div
    class="demo-target"
    tabindex="0"
    role="region"
    aria-label="Прокручиваемая область"
  >
    <div class="long">
      Широкое содержимое →
      <p>Строка 2</p>
      <p>Строка 3</p>
      <p>Строка 4</p>
      <p>Конец</p>
    </div>
  </div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  min-height: 180px;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  width: 100%;
  height: 130px;
  overflow-y: visible;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}
.long {
  width: 380px;
  min-height: 240px;
  background: linear-gradient(#ffe4bd, #b9d7eb);
}

Поддержка браузерами

Спецификация: CSS overflow

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьcss.properties.overflow-y
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
overflow-y✓1✓12✓3.5✓9.5✓3✓18✓4✓14✓1✓1.0✓4.4✓1
auto✓1

Версия 1 выпущена в 2008 г.

Версия 15 выпущена в 2011 г. — Имя overlay

✓12✓3.5

Версия 3.5 выпущена в 2009 г.

Версия 112 выпущена в 2023 г. — Имя overlay

✓15

Версия 15 выпущена в 2013 г.

Версия 15 выпущена в 2013 г. — Имя overlay

✓3

Версия 3 выпущена в 2007 г.

Версия 6 выпущена в 2012 г. — Имя overlay

Примечание MDN (англ.)

Before Safari 12.1, overlay only had an effect on legacy scrollbars on macOS. Since Safari 12.1, it is parsed as auto.

✓18

Версия 18 выпущена в 2012 г.

Версия 100 выпущена в 2022 г. — Имя overlay

✓4

Версия 4 выпущена в 2011 г.

Версия 112 выпущена в 2023 г. — Имя overlay

✓14

Версия 14 выпущена в 2013 г.

Версия 69 выпущена в 2022 г. — Имя overlay

✓2

Версия 2 выпущена в 2008 г.

Версия 6 выпущена в 2012 г. — Имя overlay

Примечание MDN (англ.)

Before Safari on iOS 12.1, overlay only had an effect on legacy scrollbars on macOS. Since Safari on iOS 12.1, it is parsed as auto.

✓1.0

Версия 1.0 выпущена в 2013 г.

Версия 19.0 выпущена в 2022 г. — Имя overlay

✓4.4

Версия 4.4 выпущена в 2013 г.

Версия 100 выпущена в 2022 г. — Имя overlay

✓2

Версия 2 выпущена в 2008 г.

Версия 6 выпущена в 2012 г. — Имя overlay

Примечание MDN (англ.)

Before WebView on iOS 12.1, overlay only had an effect on legacy scrollbars on macOS. Since WebView on iOS 12.1, it is parsed as auto.

clip✓90✓90✓81

Версия 81 выпущена в 2020 г.

Версия 3.5 выпущена в 2009 г. — Удалено в 81; Имя -moz-hidden-unscrollable

✓76✓16✓90✓81

Версия 81 выпущена в 2020 г.

Версия 4 выпущена в 2011 г. — Удалено в 81; Имя -moz-hidden-unscrollable

✓64✓16✓15.0✓90✓16
hidden✓1✓12✓3.5✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
overflow-y applies to replaced elements.✓108✓12✓148✓94×✓108✓148✓73×✓21.0✓108×
scroll✓1✓12✓3.5✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
visible✓1✓12✓3.5✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
overflow-y: visible | hidden | clip | scroll | auto;

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

| — выбор варианта.

JavaScript синтаксис:

JavaScript
element.style.overflowY = "hidden";

Начальное значение свойства

visible.

Значения свойства

Значения overflow-y
Значение Описание
visible Переполнение не обрезается, содержимое выходит за пределы размеров элемента. Начальное значение.
hidden Переполнение обрезается (контент, который выходит за размеры будет невидимым).
scroll Переполнение обрезается, но добавляется полоса прокрутки, позволяющая увидеть содержимое, которое выходит из заданных размеров.
auto Если переполнение обрезается, то полоса прокрутки будет добавлена автоматически, чтобы увидеть содержимое, которое выходит из заданных размеров.
clip Обрезает выходящее содержимое и не создаёт область прокрутки; программная прокрутка также недоступна.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства overflow-y устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Спецификация

CSS Overflow — спецификация overflow-y.

Наследуется

Нет.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

Примеры, попробуйте сами

Прокрутка и обрезка

Прокрутите второй блок. Замените auto на scroll или hidden и сравните доступность скрытого содержимого.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.large {
    width: 260px;
    min-height: 180px;
    background: #d6e5f0;
    padding: 12px;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Прокрутка и обрезка</title>
  </head>
  <body>
    <section>
      <h3>Вариант A</h3>
      <div class="sample first">
        <div class="large">
          Учебный текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого.
          Учебный текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого.
        </div>
      </div>
    </section>
    <section>
      <h3>Вариант B</h3>
      <div class="sample second">
        <div class="large">
          Учебный текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого.
          Учебный текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого.
        </div>
      </div>
    </section>
  </body>
</html>
style.css
CSS
.sample {
    width: 180px;
    max-width: 100%;
    height: 100px;
    overflow-x: hidden;
}
.first {
    overflow-y: hidden;
}
.second {
    overflow-y: auto;
}