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

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

Попробуйте

overflow-y: visible;

overflow-y: hidden;

overflow-y: clip;

overflow-y: scroll;

overflow-y: auto;

<section class="default-example" id="default-example">
  <p id="example-element">
    Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's
    Inn Hall. Implacable November weather. As much mud in the streets as if the
    waters had but newly retired from the face of the earth.
  </p>
</section>

#example-element {
  width: 15em;
  height: 9em;
  border: medium dotted;
  padding: 0.75em;
  text-align: left;
}

Синтаксис

/* 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-clip-margin. В результате содержимое выходит за внутреннюю границу элемента на значение <length> свойства overflow-clip-margin или на 0px, если оно не задано. Разница между clip и hidden заключается в том, что ключевое слово clip также запрещает любую прокрутку, включая программную. Новый контекст форматирования не создаётся. Чтобы создать контекст форматирования, используйте overflow: clip вместе с display: flow-root. Блок элемента не является контейнером прокрутки.

scroll

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

auto

Переполняющее содержимое обрезается по внутренней границе элемента, и его можно прокрутить в область видимости. В отличие от scroll, пользовательские агенты отображают полосы прокрутки только если содержимое переполняет элемент; по умолчанию полосы прокрутки скрыты. Если содержимое помещается во внутреннюю область элемента, отображение такое же, как при visible, но при этом создаётся новый контекст блочного форматирования.

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

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

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

Результат

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

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

См. также

• clip, display, text-overflow, white-space
• Модуль CSS overflow
• Изучите переполняющее содержимое