overflow-y

Свойство overflow-y CSS задаёт отображение содержимого, которое выходит за пределы верхнего и нижнего краёв блочного элемента. Это может быть пустота, полоса прокрутки или само содержимое. Данное свойство также можно задать с помощью сокращённого свойства overflow.

Попробуйте

Синтаксис

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

/* Global values */
overflow-y: inherit;
overflow-y: initial;
overflow-y: revert;
overflow-y: revert-layer;
overflow-y: unset;

Свойство overflow-y задаётся одним ключевым значением <overflow>.

Если overflow-x имеет значение hidden, scroll, или auto и свойство overflow-y равно visible (по умолчанию), значение будет неявно вычислено как auto.

Значения

visible: Содержимое, выходящее за пределы, не обрезается и может быть видно за пределами области отступа элемента по верхнему и нижнему краям. Элемент не является контейнером прокрутки.
hidden: Содержимое, выходящее за пределы, обрезается, если необходимо, для того, чтобы поместиться вертикально в области отступа элемента. Полосы прокрутки не отображаются.
clip: Содержимое, выходящее за пределы, обрезается по границе обрезки overflow элемента, которая определена с помощью свойства overflow-clip-margin. В результате, содержимое выходит за пределы области отступа элемента на величину значения <length> overflow-clip-margin или на величину 0px , если не задано. Различие между clip и hidden заключается в том, что ключевое слово clip также запрещает всю прокрутку, включая программную прокрутку. Новый контекст форматирования не создаётся. Для создания контекста форматирования используйте overflow: clip вместе с display: flow-root. Элемент не является контейнером прокрутки.
scroll: Содержимое, выходящее за пределы, обрезается, если необходимо, для того, чтобы поместиться вертикально в области отступа элемента. Браузеры отображают вертикальные полосы прокрутки независимо от того, обрезается ли содержимое. (Это предотвращает появление или исчезновение полос прокрутки при изменении содержимого). Принтеры могут всё ещё печатать выходящее за пределы содержимое.
auto: Содержимое, выходящее за пределы, обрезается по области отступа элемента, и выходящее за пределы содержимое может быть прокручено в поле зрения. В отличие от scroll, пользовательские агенты отображают полосы прокрутки только если содержимое выходит за пределы области, скрывая полосы прокрутки по умолчанию. Если содержимое помещается внутри области отступа элемента, оно выглядит так же, как и при значении visible, но всё равно создаёт новый контекст форматирования блоков.

Примечание: Ключевое слово overlay является устаревшим псевдонимом значения auto. При overlay, полосы прокрутки выводятся поверх содержимого, а не занимают дополнительное пространство.

Формальное определение

Начальное значение	`visible`
Применимо к	Блочные контейнеры, контейнеры flex и контейнеры grid
Наследуется	нет
Вычисленное значение	как указано, за исключением `visible`/`clip` вычисления в `auto`/`hidden` соответственно, если одно из `overflow-x` или `overflow-y` не равно `visible` ни clip
Тип анимации	дискретный

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

overflow-y = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

Примеры

Настройка поведения overflow-y

HTML

<ul>
  <li>
    <code>overflow-y:hidden</code> — hides the text outside the box
    <div id="div1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:scroll</code> — always adds a scrollbar
    <div id="div2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:visible</code> — displays the text outside the box if
    needed
    <div id="div3">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:auto</code> — equivalent to <code>scroll</code>
    on most browsers
    <div id="div4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>

CSS

div {
  border: 1px solid black;
  width: 250px;
  height: 100px;
}

#div1 {
  overflow-y: hidden;
  margin-bottom: 12px;
}
#div2 {
  overflow-y: scroll;
  margin-bottom: 12px;
}
#div3 {
  overflow-y: visible;
  margin-bottom: 120px;
}
#div4 {
  overflow-y: auto;
  margin-bottom: 120px;
}

Результат

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

Спецификация
CSS Overflow Module Level 3 # overflow-properties

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`overflow-y`	1	12	3.5	9.5	3	18	4	14	1	1.0	4.4
`auto`	115	12	3.5112	1515	3≤13.1	18100	4112	1469	2≤13.4	1.019.0	4.4100
`clip`	90	90	813.5–81	76	16	90	814–81	64	16	15.0	90
`hidden`	1	12	3.5	15	3	18	4	14	2	1.0	4.4
`scroll`	1	12	3.5	15	3	18	4	14	2	1.0	4.4
`visible`	1	12	3.5	15	3	18	4	14	2	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y