Создаем скролл в div, если контент превышает viewport

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

Для активации прокрутки в зафиксированном элементе при его переполнении установите overflow-y: auto; в сочетании с max-height: 100vh;. Это позволит элементу поместиться в пределах видимой области экрана, привлекая полосу прокрутки по мере необходимости.

.fixed-element {
  position: fixed; 
  max-height: 100vh; 
  overflow-y: auto;
}

<div class="fixed-element">
  <!-- Здесь может быть больше контента! -->
</div>

Следите за чистотой стиля, это облегчит поддержку и возможные модификации кода.

Дополнительные стили

Расширяем адаптивность с помощью CSS

Для корректного отображения фиксированного элемента на различных устройствах, можно применить процентные значения или единицы, привязанные к размерам экрана (vh, vw). Медиазапросы облегчат настройку стиля в зависимости от размеров устройства.

@media (max-width: 600px) {
  .fixed-element {
    max-height: 50vh; 
  }
}

Подробнее об этом расскажет наш спикер на видео

Сглаживаем прокрутку на сенсорных дисплеях

Комфортного навигации на сенсорных устройствах можно добиться добавлением свойства -webkit-overflow-scrolling: touch;. Это обеспечит плавное пролистывание контента.

.fixed-element {
  -webkit-overflow-scrolling: touch;
}

Структура против декоративности

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

.fixed-element {
  border: 1px solid #ccc;
}

Содержимое внутри должно занимать всю высоту элемента (height: 100%;), что позволит контролировать прокрутку:

<div class="fixed-element">
  <div class="inner-content" style="height: 100%;">
    <!-- Внутри ожидает вас прокручиваемый контент -->
  </div>
</div>

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

Представляем наглядный пример с эмодзи, демонстрирующий принцип работы прокручиваемых зафиксированных элементов:

📦 Зафиксированный элемент: [🍏, 🍎, 🍐, ... 🍉]
💻 Высота видимой области просмотра: |--- Пространство, доступное для просмотра ---|

📦 Внутри 💻:
+----------+
| 🍏       |
| 🍎       |
| ...      |
| 🍉 (не видно) |
+----------+
Прокрутка 🔒

📦 За пределами 💻:
+----------+
| 🍏       | <- Вверху элемента
+----------+
Прокрутка 🔓 

После прокрутки:
+----------+
| 🍉       | <- Подобно летящему китайскому змею
+----------+

Применение JavaScript для детальной настройки

С помощью JavaScript можно динамически менять максимальную высоту зафиксированного элемента, контролируя прокрутку в соответствии с содержимым и размером видимой области просмотра. Отлично справляются с этой задачей обработчики событий resize, позволяющие отслеживать текущее состояние переполнения.

window.addEventListener('resize', function() {
  var fixedElement = document.querySelector('.fixed-element'); 
  var isContentOverflowing = fixedElement.scrollHeight > fixedElement.clientHeight; 
  fixedElement.style.overflowY = isContentOverflowing ? 'auto' : 'hidden';
});

Особое внимание доступности

Протестируйте навигацию по элементам с помощью клавиатуры и не забывайте про ARIA атрибуты для повышения доступности. Выразительные визуальные индикаторы помогут пользователям легче ориентироваться.

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

1. position – CSS: Cascading Style Sheets | MDN — Всё о позиционировании элементов с помощью CSS.
2. overflow – CSS: Cascading Style Sheets | MDN — Как эффективно управлять переполнением контента в CSS.
3. Fun with Viewport Units | CSS-Tricks – CSS-Tricks — Интересные примеры применения единиц viewport в CSS.
4. CSS max-height property — Основы использования свойства max-height в CSS.
5. javascript – Determine if an HTML element's content overflows – Stack Overflow — Методы определения переполнения контента в JavaScript.
6. Window: resize event – Web APIs | MDN — Обзор работы с событиями изменения размера окна.
7. Responsive Web Design: What It Is And How To Use It — Smashing Magazine — Руководство по созданию адаптивного веб-дизайна.