w3docs logo

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

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

Свойство overflow-yимеет четыре значения - visible, hidden, scroll, auto.

Если значение свойства overflow-y установлено в visible, значение overflow-x, по умолчанию, будет установлено в visible.

Если значение свойства overflow-y установлено в scroll, auto или hidden, значение свойства overflow-x будет установлено в auto.

Значение по умолчанию visible
Применяется К блочным контейнерам, флекс- и грид-контейнерам.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.overflowY = "auto";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div.scroll {
      background-color: #1c87c9;
      color: #fff;
      height: 60px;
      width: 200px;
      overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства overflow-y</h2>
    <h3>Overflow-y: scroll</h3>
    <div class="scroll">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов..</div>
  </body>
</html>

Пример со значением "visible":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div.visible {
      background-color: #8ebf42;
      color: #666;
      height: 40px;
      width: 200px;  
      overflow-y: visible;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства overflow-y</h2>
    <h3>Overflow-y: visible</h3>
    <div class="visible">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
  </body>
</html>

Пример со значением "hidden":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div.hidden {
      background-color: #1c87c9;
      color: #fff;
      height: 60px;
      width: 200px;
      overflow-y: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства overflow-y</h2>
    <h3>Overflow-y: hidden</h3>
    <div class="hidden">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
  </body>
</html>

Пример со значением "auto":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div.auto {
      background-color: #1c87c9;
      color: #fff;
      height: 60px;
      width: 200px;
      overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства overflow-y</h2>
    <h3>Overflow-y: auto</h3>
    <div class="auto">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
  </body>
</html>

Рассмотрим пример со всеми значениями:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <h3>overflow-y: scroll</h3>
    <div class="scroll">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
    <h3>overflow-y: hidden</h3>
    <div class="hidden">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
    <h3>overflow-y: auto</h3>
    <div class="auto">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
    <h3>overflow-y: visible</h3>
    <div class="visible">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
  </body>
</html>

Значения

Значение Описание
visible Контент не срезается и отображается та часть, которая выходит за границы сверху или снизу от блока. Значение по умолчанию.
hidden Контент срезается таким образом, чтобы поместится внутри блока по вертикали. Полоса прокрутки не добавляется.
scroll Контент срезается таким образом, чтобы поместится внутри блока по вертикали. Полоса прокрутки добавляется, чтобы увидеть оставшуюся часть контента.
auto Контент срезается таким образом, чтобы поместится внутри блока по вертикали. Зависит от браузера. Если контент выходит за границы, добавляется полоса прокрутки.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
1.0+ 12.0+ 1.5+ 3.0+ 9.5+

Практикуйте свои знания

Что делает свойство CSS 'overflow-y'?
Считаете ли это полезным?