W3docs
ru
Войти

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

Узнайте, как CSS overflow-y управляет вертикальным обрезанием контента и полосами прокрутки. Все значения, взаимодействие с overflow-x и примеры.

Свойство overflow-y управляет тем, что происходит, когда содержимое элемента выше его контейнера. Вы можете позволить контенту выходить за пределы, обрезать его без видимости или добавить полосу прокрутки — всегда или только при необходимости.

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

Справочник свойства

Начальное значениеvisible
Применяется кБлочным контейнерам, контейнерам flex и контейнерам grid
НаследуетсяНет
АнимируетсяНет
ВерсияCSS3
DOM-синтаксисelement.style.overflowY = "scroll"

Синтаксис

overflow-y: visible | hidden | scroll | auto | clip | initial | inherit;

Значения

ЗначениеОписание
visibleСодержимое не обрезается и может отображаться за верхним и нижним краями блока с отступами. Это значение по умолчанию.
hiddenСодержимое обрезается по границе блока с отступами. Полоса прокрутки не отображается; обрезанный контент недоступен.
scrollСодержимое обрезается, и полоса прокрутки всегда отображается, даже если контент помещается.
autoСодержимое обрезается только при переполнении. Браузер автоматически добавляет полосу прокрутки при необходимости.
clipСодержимое обрезается как при hidden, но также отключается программная прокрутка (scrollTop). Более строгий вариант, чем hidden.
initialСбрасывает свойство к значению по умолчанию (visible).
inheritНаследует вычисленное значение от родительского элемента.
Информация

Когда overflow-y установлено в scroll, auto или hidden, браузер автоматически изменяет любое значение visible у overflow-x на auto. Это происходит потому, что блок не может быть обрезан по одной оси, оставаясь полностью неограниченным по другой — спецификация запрещает такую комбинацию.

Когда использовать каждое значение

  • visible — значение по умолчанию; полезно, когда вы намеренно хотите, чтобы элемент (например, всплывающая подсказка или выпадающий список) выходил за свои границы без обрезания.
  • hidden — используйте для обрезания декоративного переполнения (например, большого фонового изображения, которое не должно вызывать полосы прокрутки страницы) или для создания нового контекста форматирования блока.
  • scroll — используйте, когда вам всегда нужно зарезервировать место под полосу прокрутки, чтобы раскладка не смещалась при росте контента. Полезно в боковых панелях или панелях, где важна стабильность раскладки.
  • auto — наиболее распространённый выбор для прокручиваемых областей. Полоса прокрутки появляется только тогда, когда контент действительно переполняет контейнер, избегая постоянного отступа, который создаёт scroll.
  • clip — используйте, когда нужно предотвратить любую прокрутку (включая манипуляции с scrollTop через JavaScript) внутри ограниченной области без отображения полосы прокрутки.

Примеры

overflow-y: scroll

Полоса прокрутки всегда отображается, даже если весь текст помещается. Контейнер обрезает содержимое по вертикали и позволяет пользователю прокручивать его.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.scroll {
        background-color: #1c87c9;
        color: #fff;
        height: 60px;
        width: 200px;
        overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>Overflow-y: scroll</h3>
    <div class="scroll">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>
Попробуйте сами »

overflow-y: visible

Содержимое отображается за нижним краем контейнера. Обратите внимание, что текст выходит за пределы зелёного блока — обрезания не происходит.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.visible {
        background-color: #8ebf42;
        color: #666;
        height: 40px;
        width: 200px;
        overflow-y: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>Overflow-y: visible</h3>
    <div class="visible">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>
Попробуйте сами »

overflow-y: hidden

Содержимое обрезается по нижнему краю контейнера. Полоса прокрутки не появляется, и обрезанный контент недоступен при прокрутке.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.hidden {
        background-color: #1c87c9;
        color: #fff;
        height: 60px;
        width: 200px;
        overflow-y: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>Overflow-y: hidden</h3>
    <div class="hidden">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>
Попробуйте сами »

overflow-y: auto

Полоса прокрутки появляется только тогда, когда текст переполняет фиксированную высоту. Если бы контент был короче 60 пикселей, полоса прокрутки не отображалась бы.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.auto {
        background-color: #1c87c9;
        color: #fff;
        height: 60px;
        width: 200px;
        overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>Overflow-y: auto</h3>
    <div class="auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>
Попробуйте сами »

Все значения рядом

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.scroll {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: scroll;
      }
      div.hidden {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: hidden;
      }
      div.auto {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: auto;
      }
      div.visible {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>overflow-y: scroll</h3>
    <div class="scroll">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
    </div>
    <h3>overflow-y: hidden</h3>
    <div class="hidden">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>overflow-y: auto</h3>
    <div class="auto">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>overflow-y: visible</h3>
    <div class="visible">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </body>
</html>
Попробуйте сами »

Распространённые ошибки

overflow-y: visible тихо изменяется браузером. Если вы установите overflow-x в любое значение, отличное от visible на том же элементе, overflow-y: visible будет обрабатываться как auto. Спецификация требует, чтобы обе оси были visible, если хотя бы одна из них должна оставаться полностью неограниченной.

overflow-y: hidden создаёт контейнер прокрутки без полосы прокрутки. Пользователи не могут прокручивать колёсиком мыши или жестом касания, но JavaScript всё ещё может перемещать позицию прокрутки через scrollTop. Используйте overflow-y: clip, если хотите предотвратить это тоже.

Для scroll и auto требуется фиксированная height. Без ограниченной высоты элемент просто растягивается, чтобы вместить содержимое, поэтому переполнения никогда не происходит и полоса прокрутки не появляется.

Прокрутка касанием на мобильных устройствах. Чтобы включить прокрутку с инерцией в контейнере с overflow-y: auto или overflow-y: scroll в iOS Safari, в старых кодовых базах может потребоваться добавить -webkit-overflow-scrolling: touch (в современных версиях iOS это больше не нужно, так как включено по умолчанию).

Контексты наложения. Установка overflow-y в любое значение, отличное от visible, создаёт новый контекст наложения на этом элементе. Это может повлиять на поведение z-index у дочерних элементов, которые пытаются выйти за пределы контейнера.

Связанные свойства

  • overflow — сокращение для обеих осей
  • overflow-x — поведение переполнения по горизонтали
  • overflow-wrap — управляет переносом длинных слов
  • text-overflow — как сигнализируется обрезанный встроенный текст (например, многоточие)
  • scroll-behavior — плавная или мгновенная прокрутка
  • resize — позволяет пользователям изменять размер прокручиваемого контейнера
  • height — ограничение высоты, вызывающее переполнение

Практика

Практика
Что делает свойство overflow-y в CSS?
Что делает свойство overflow-y в CSS?
Was this page helpful?