В чем разница между overflow: auto и overflow: scroll в CSS?

В этой статье мы поймем разницу между значениями ` scroll ` и ` auto ` для сокращенного свойства CSS overflow. Свойство Overflow задает предпочтительное поведение для переполнения элемента, т. е. когда содержимое элемента слишком велико, чтобы соответствовать контексту форматирования блока в обоих направлениях. Проще говоря, он управляет поведением большого контента, который отображается в зависимости от ширины экрана устройства.

Переполнение: прокрутка

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

Синтаксис:

element {
    overflow: scroll;
}

Пример 1. В этом примере описывается базовое использование свойства CSS Overflow, где мы использовали свойство overflow: scroll для всех тегов <p>.

Вывод: из приведенного ниже вывода текст внутри тега <p> имеет полосы прокрутки как в горизонтальном, так и в вертикальном направлениях, даже если горизонтальная прокрутка не требуется.

Переполнение: авто

Это значение свойства обычно используется, когда переполнение обрезается, а полоса прокрутки включается автоматически, чтобы отобразить остальную часть содержимого. Это очень похоже на переполнение: прокрутка, с той лишь разницей, что она появится только тогда, когда ваш элемент требует этого, и поможет вам избавиться от обеих полос прокрутки, когда они не нужны.

Синтаксис:

element {
    overflow: auto;
}

Пример 2. В этом примере описывается базовое использование свойства CSS Overflow, где мы использовали свойство «overflow: auto» для всех тегов <p>.

Вывод: из вывода текст внутри тега <p> имеет полосу прокрутки только в вертикальном направлении и не присутствует в горизонтальном направлении, что лучше, чем «переполнение: прокрутка».

Разница между переполнением: прокрутка и переполнением: авто: