Overflow Y: управление вертикальным переполнением контента на вашем сайте
Оверфлоу y относится к свойству CSS, которое позволяет контенту прокручиваться по вертикали, если он превышает высоту родительского элемента. Когда контент переполняет высоту родительского элемента, обычно браузер автоматически добавляет скроллбары.
Пример 1: Использование overflow-y со значением auto:
HTML:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
...
CSS:
.container {
height: 200px;
width: 300px;
overflow-y: auto;
}
.content {
height: 100%;
}
В данном примере элемент "container" имеет высоту 200 пикселей и ширину 300 пикселей. Содержимое элемента "content" превышает высоту "container". Значение "auto" для свойства "overflow-y" позволяет автоматически добавить вертикальный скроллбар к родительскому элементу.
Пример 2: Использование overflow-y со значением scroll:
HTML:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
...
CSS:
.container {
height: 200px;
width: 300px;
overflow-y: scroll;
}
.content {
height: 100%;
}
В этом примере элемент "container" также имеет высоту 200 пикселей и ширину 300 пикселей. Но вместо значения "auto" мы используем значение "scroll" для свойства "overflow-y". Теперь скроллбар будет всегда видимым (даже если содержимое помещается в родительский элемент) и пользователь сможет прокручивать его вертикально.
Пример использования свойства "overflow-y" в JavaScript:
HTML:
CSS:
.container {
height: 200px;
width: 300px;
overflow-y: scroll;
}
.content {
height: 100%;
}
ul {
list-style-type: none;
}
JavaScript:
function addItems() {
const list = document.getElementById('list');
for (let i = 0; i < 20; i++) {
const li = document.createElement('li');
li.innerText = 'Item ' + (i + 1);
list.appendChild(li);
}
}
В этом примере при нажатии на кнопку "Add Items" 20 элементов будут добавлены в список "list". Поскольку содержимое списка превышает высоту родительского элемента "container", появляется вертикальный скроллбар. Пользователь может прокручивать список вверх и вниз, чтобы просмотреть все элементы.