Автоматический вертикальный scrollbar в div в CSS

Быстрый ответ

Пришло время пригласить скроллбар в ваш div с помощью всего лишь нескольких строк CSS-кода. Появится он тогда, когда содержимое начнет выходить за края:

.scrollable-div {
    height: 200px; // Высота может быть любой, это на ваш выбор
    overflow-y: auto;
}

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

<div class="scrollable-div">
    Как много интересного! Прокрутите немного вниз!
</div>

Значение auto гарантирует, что скроллбар будет скромно появляться только при необходимости дополнительного расширения div.

Максимальная высота для эластичности

Хотите, чтобы ваш div стал более гибким, подобно гимнасту? Введите свойство max-height, и div прекрасно подстроится под количество содержимого:

.scrollable-div {
    max-height: 500px; // Это у нас на самый крайний случай!
    overflow-y: auto;
}

Max-height освободит вас от лишнего пустого пространства, если содержимое окажется немногочисленным.

Совместимость с различными браузерами: друг или враг?

Overflow-y: auto; прекрасно работает во всех браузерах. Однако стоит быть осторожными с такими свойствами, как float: left и width, которые могут нарушить работу скроллбара в браузерах типа Firefox и Chrome.

Всегда видимый скроллбар

Если желаете увидеть скроллбар даже тогда, когда div пуст, используйте следующее правило:

.scrollable-div {
    overflow-y: scroll;
}

Скроллбар, всегда находящийся на виду, продолжает существовать внутри div, даже когда контент отсутствует.

Визуализация

Скроллбар можно представить как управляющего содержимым. Он определяет, какое и сколько содержимого вам стоит увидеть:

Пока скроллбар не вмешивается: 🏢 🪟 == 🪟 🪟 == 🪟 🪟 == 🪟 Скроллбар пока не при делах. Вы можете наслаждаться ограниченным видом.

div {
    overflow-y: auto; /* Назначаем управляющего */
}

После активизации скроллбара: 🏢 🪟 == 🪟 🪟 == 🪟 🪟 == 🪟 🎢 🎢 🎢 🎢 Вот так! С активированным скроллбаром у вас теперь есть возможность свободного просмотра всего обширного контента.

UX-выбор: auto против scroll

Важно выбрать между auto и scroll:

• Overflow-y: auto; показывает скроллбар только тогда, когда это необходимо, поддерживая в то же время аккуратный внешний вид.
• Overflow-y: scroll; делает скроллбар постоянно видимым, даже если он ни к чему. Это своего рода визуальный индикатор, информирующий пользователей о возможности прокрутки.

Overflow: управление в условиях неопределенности

Если вы не уверены в том, сколько содержимого понадобится для заполнения div, то overflow-y: auto; станет идеальной стратегией управления содержимым. Контроль над переполнением обеспечивает доступность и читаемость в любых условиях.

Идеальное сочетание переполнения и интерактивности

Ничто так не портит профессионализм в работе, как сломанное select поле или сбой модального окна. Обдуманное управление переполнением предотвращает бессмыслицу в UI. Overflow-y: auto; помогает контролировать прокрутку и сохранять модульность интерфейса.

Полезные материалы

1. overflow | CSS-Tricks — Исследуйте глубины CSS на CSS-Tricks.
2. overflow – CSS: Каскадные таблицы стилей | MDN — Узнайте побольше об свойствах переполнения на MDN, это аналог изучения Моны Лизы в мире документации.
3. html – Создание вертикально прокручиваемого div с использованием CSS – Stack Overflow — Дискуссии на Stack Overflow с реальными решениями проблем.
4. GitHub – mdbootstrap/perfect-scrollbar: Минималистичный, но идеальный плагин для пользовательского скроллбара. — Плагин скроллбара, который станет идеальным дополнением для вашего проекта на GitHub.
5. Современные подходы к стилизации скроллбаров с помощью CSS (Обновление 2022) | CSS-Tricks — Последние тренды в стилизации скроллбаров на CSS-Tricks.
6. GitHub – Grsmto/simplebar: Удобная библиотека для создания пользовательских скроллбаров на чистом JavaScript — Комбинация скроллбаров и JavaScript, подобно кулинарному шедевру печенья и молока.