Переполнение по отдельным направлениям
Свойства overflow-x и overflow-y позволяют управлять переполнением отдельно по горизонтали и по вертикали.
CSS overflow-x и overflow-y
Свойства overflow-x и overflow-y задают, что происходит с переполнением только по горизонтали, только по вертикали (или в обоих направлениях).
overflow-xуправляет левым и правым краями содержимого.overflow-yуправляет верхним и нижним краями содержимого.
Пример
Горизонтальная полоса прокрутки скрыта, а вертикальная полоса прокрутки добавлена.
Prompt
HTML-страница, скрывающая горизонтальную полосу прокрутки и показывающая вертикальную.
Во внутреннем блоке
<style> задайте <div> ширину, высоту и коралловый фон, с overflow-x hidden и overflow-y scroll. Поместите внутрь больше текста, чем помещается по вертикали.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 200px;
height: 100px;
background-color: coral;
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
</style>
</head>
<body>
<div>You can use the overflow property when you want better control of the layout. The overflow property specifies what happens if content overflows an element's box. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
</body>
</html>
Типичные случаи использования
Эти свойства полезны, когда нужно разное поведение прокрутки в каждом направлении, например: overflow-x: auto для широких таблиц, overflow-y: scroll для окон чата и overflow-x: auto для блоков кода с длинными строками.
Пример
Показана только горизонтальная полоса прокрутки.
Prompt
HTML-страница, показывающая только горизонтальную полосу прокрутки.
Во внутреннем блоке
<style> задайте <div> ширину, высоту и коралловый фон, с overflow-x scroll и overflow-y hidden, и оставьте текст на одной строке (white-space nowrap), чтобы он выходил за пределы по горизонтали.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 200px;
height: 100px;
background-color: coral;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div>You can use the overflow property when you want better control of the layout. This long line of text stays on one line and scrolls sideways.</div>
</body>
</html>