overflow определяет, что делать с содержимым, которое не помещается в размеры блока: показать его как есть (значение по умолчанию, visible), спрятать лишнее (hidden), включить прокрутку всегда (scroll) или только когда она реально нужна (auto).
В этом уроке
Попробуй прямо сейчас: замени overflow: auto на overflow: hidden - полоса прокрутки исчезнет, и часть текста станет недоступна для просмотра.
Что делает overflow: visible и overflow: hidden с лишним содержимым
overflow: visible - значение по умолчанию: содержимое, которое не помещается, просто выходит за пределы блока и остаётся видимым, как и обрезание фона у скруглённых углов из урока про border-radius ничего не резало без overflow: hidden. overflow: hidden обрезает лишнее без полосы прокрутки - пользователь не может его прокрутить через интерфейс страницы. Неочевидный нюанс: даже при overflow: hidden JavaScript всё ещё может программно сдвинуть прокрутку элемента (scrollTop) - визуальной полосы для этого просто нет, но технически элемент не становится полностью "запечатанным".
overflow: hidden; - лишнее содержимое обрезается, доступа к нему через интерфейс нет.
Ожидание, что overflow: hidden полностью блокирует любую прокрутку - через JavaScript scrollTop содержимое всё равно можно сдвинуть.
Когда появляется полоса прокрутки: overflow: auto и overflow: scroll
overflow: auto включает прокрутку только тогда, когда содержимое реально не помещается - если оно помещается, элемент остаётся обычным, без всякой прокрутки. overflow: scroll по спецификации всегда держит механизм прокрутки готовым, даже если содержимое помещается - на устройствах с классическими полосами прокрутки это может резервировать место заранее, чтобы полоса не появлялась и не исчезала внезапно; на современных системах с тонкими полосами эта разница часто визуально незаметна, но по смыслу свойства она всё равно есть.
overflow: auto; с содержимым, которое помещается - прокрутки нет вообще, элемент ведёт себя как обычный блок.
overflow: auto; с содержимым, которое НЕ помещается - прокрутка появляется автоматически, ничего дополнительно настраивать не нужно.
Как задать overflow отдельно по горизонтали и вертикали: overflow-x и overflow-y
Если задать overflow одним значением, оно применится сразу к обеим осям - и по горизонтали, и по вертикали. Чтобы задать поведение отдельно для каждой оси, есть отдельные свойства overflow-x (только по горизонтали) и overflow-y (только по вертикали) - например, спрятать горизонтальную прокрутку, но оставить вертикальную. Современный overflow-shorthand также умеет принимать два значения через пробел (первое - для вертикальной оси, второе - для горизонтальной), но отдельные overflow-x/overflow-y понятнее и надёжнее для новичка.
overflow-x: hidden; overflow-y: auto; - по горизонтали ничего не прокручивается и не вылезает, а по вертикали появляется прокрутка при необходимости.
overflow: hidden;, когда на самом деле нужно спрятать только горизонтальное переполнение - заодно спрячется и вертикальное, хотя оно, возможно, было нужно.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Ставят overflow: hidden и думают, что содержимое исчезло насовсем | Содержимое просто визуально спрятано - оно всё ещё в разметке и доступно через JS | Использовать overflow: hidden осознанно как визуальную обрезку, а не как удаление контента |
| Задают overflow: hidden, когда на самом деле нужна прокрутка | Часть содержимого становится совсем недоступной для просмотра | Использовать overflow: auto или overflow: scroll вместо hidden |
| Не могут понять, почему position: sticky не работает | У одного из родителей задан overflow: hidden/auto/scroll, что полностью отключает "прилипание" | Проверить всех предков липкого элемента на overflow, отличный от visible |
| Ставят overflow: hidden сразу по обеим осям, хотя нужна только одна | Прокрутка пропадает и там, где она была нужна | Использовать overflow-x и overflow-y отдельно вместо общего overflow |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| Показать всё как есть (по умолчанию) | overflow: visible; |
| Спрятать лишнее без прокрутки | overflow: hidden; |
| Прокрутка только когда нужна | overflow: auto; |
| Прокрутка всегда наготове | overflow: scroll; |
| Только по одной оси | overflow-x: ...; overflow-y: ...; |
| "Обхватить" float-элементы (без clearfix) | overflow: hidden; на родителе |
Коротко: отвечаем на вопросы
Можно ли прокрутить содержимое через JavaScript, если задан overflow: hidden?
Да - overflow: hidden убирает только видимую полосу прокрутки и доступ к ней через интерфейс, но программно (например, установив elem.scrollTop) содержимое всё равно можно сдвинуть. Полностью "запечатанным" от любой прокрутки элемент не становится.
Почему position: sticky вдруг перестаёт работать?
Самая частая причина - overflow, отличный от visible (hidden, auto или scroll), заданный у одного из родителей липкого элемента, даже если сам этот родитель не прокручивается. Это официально задокументированное ограничение, а не баг конкретного браузера - стоит проверить всю цепочку родителей на overflow, если sticky не сработал.
