Вертикальная прокрутка для longtext в DIV: решение в HTML

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

Для обеспечения вертикальной прокрутки в элементе <div>, неизменяя его размеров, следует установить свойство overflow-y: scroll в сочетании с определённой height или max-height.

<div style="overflow-y: scroll; max-height: 200px; border: 1px solid #000;">
  <!-- Здесь находится ваш контент -->
</div>

А чтобы исключить нежелательное появление горизонтальной прокрутки, добавьте overflow-x: hidden, таким образом ограничив ширину элемента.

<div style="overflow-y: scroll; overflow-x: hidden; max-height: 200px;">
  <!-- Здесь находится ваш контент -->
</div>

Настройка прокручиваемого div

Регулировка размеров

Определение width и height задают видимую область и, соответственно, влияют на функционирование скроллбара. Для адаптации под ширину контента используйте CSS-единицы, такие как em, vw, vh.

Гибкое использование max-height

Использование max-height вместо height позволяет <div> приспосабливаться под контент до того момента, когда активируется прокрутка. Это особенно удобно в случаях, когда длина контента заранее не известна.

Интерактивность со свойством overflow

Применяйте overflow: auto;, чтобы скроллбары появлялись только в случае необходимости. Этот подход улучшит удобство интерфейса для пользователя.

Стилизация и масштабируемость

Ставить стили в атрибуты – это быстрый способ, но в более крупных проектах лучше использовать отдельные CSS-файлы ради улучшения читаемости и масштабируемости кода:

.scrollable-div {
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: 200px;
}

<div class="scrollable-div">
  <!-- Поместите здесь ваш уникальный контент -->
</div>

Читаемость контента

Убедитесь, что ширина <div> достаточная, чтобы текст оставался читаемым, даже с активной вертикальной прокруткой. Проведите проверку на различных устройствах и разрешениях экрана.

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

Можно воспринимать <div> как стакан 🥛, который переполняется своим содержимым:

Обычный DIV       Переполненный DIV
🥛               🥛
|🌊🌊🌊|          |🌊🌊🌊|
|    |          |🔽🔽🔽|
|    |          |    |

Чтобы предотвратить перелив в горизонтальном направлении 🔲, мы используем "соломинку" (🍹), которая направляет поток только в вертикальном направлении:

DIV без прокрутки      Вертикально прокручиваемый DIV
  (Без соломинки)        (С соломинкой)
🥛               🥛
|🌊|             |🌊|
|  |             |🔽|
|  |             |🔽|

Здесь соломинка это символ вертикального скроллбара, благодаря которому контент остаётся в рамках области, удобной для чтения.

Прокручиваемые div: Использование и доступность

Подборка под конкретный сценарий

• Исключительно текст для чтения: Для логов и транскриптов поддерживайте эффективность и читабельность прокрутки.
• Формы с инструкциями: Сохраняйте видимость элементов формы, используя для сопроводительных текстов прокручиваемые div.
• Адаптивный дизайн: Скроллбары следует приводить в соответствие с размерами экрана, чтобы они были удобны для использования на мобильных устройствах.

Доступность

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

Продвинутые методы создания прокручиваемых div

Медиа-запросы для улучшения UX

Примените медиа-запросы для настройки <div> в зависимости от размера экрана:

@media (max-width: 600px) {
  .scrollable-div {
    max-height: 150px;
  }
}

Стилизация прокрутчика

С помощью CSS вы можете изменить стандартный вид прокрутчика в браузерах, использующих WebKit движок:

.scrollable-div::-webkit-scrollbar {
  width: 12px;
}

Метод "Прилипание при скролле"

Специфичное свойство scroll-snap-type позволяет фиксировать отображение определенных элементов в процессе прокрутки:

.scrollable-div {
  scroll-snap-type: y mandatory;
}

.scrollable-div p {
  scroll-snap-align: start;
}

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

1. overflow – CSS: Cascading Style Sheets | MDN — подробное руководство по свойству overflow в CSS.
2. overflow | CSS-Tricks — советы и трюки для создания прокручиваемого контента с помощью overflow.
3. CSS Layout – The position Property — основы позиционирования элементов и их взаимодействия с прокруткой.
4. When And How To Use CSS Multi-Column Layout — Smashing Magazine — продвинутые темы управления длинным текстом и создания многостолбчатых макетов.
5. A Complete Guide to Flexbox | CSS-Tricks — исползование Flexbox для разработки компонентов с прокручиваемым содержимым.
6. Can I use... Support tables for HTML5, CSS3, etc — проверка поддержки CSS-свойства overflow в различных браузерах.