У вложенного списка есть свой скролл, но после его последней строки колесо продолжает двигать страницу. Это передача прокрутки следующему контейнеру, или scroll chaining. На Mentoring.digital настроим панель, у которой достижение края не передаёт прокрутку наружу.
У панели должен быть собственный контейнер прокрутки
Начните с ограниченной высоты и overflow-y: auto. Без ограничения содержимое может просто растянуть панель, и проверять достижение её края будет негде. В примере обычная секция содержит достаточно длинный список, чтобы её содержимое превышало 12rem.
<section class="message-panel" tabindex="0"
aria-label="Учебный список сообщений">
<p>Первое сообщение с описанием задачи.</p>
<p>Второе сообщение с описанием задачи.</p>
<p>Третье сообщение с описанием задачи.</p>
<p>Четвёртое сообщение с описанием задачи.</p>
<p>Пятое сообщение с описанием задачи.</p>
<p>Шестое сообщение с описанием задачи.</p>
</section>.message-panel {
max-block-size: 12rem;
overflow-y: auto;
overscroll-behavior-y: contain;
padding: 1rem;
border: 1px solid #777;
}
.message-panel:focus-visible {
outline: 3px solid #3856d8;
outline-offset: 3px;
}tabindex="0" позволяет перевести фокус в учебную секцию клавишей Tab. Имя через aria-label объясняет назначение области. Это не готовая реализация диалогового окна: здесь нет управления открытием, возврата фокуса и других обязанностей модального интерфейса.
Contain останавливает передачу за границу
Значение auto оставляет стандартное поведение браузера на границе. contain запрещает продолжать прокрутку во внешнем контейнере, сохраняя возможный локальный эффект достижения края. none дополнительно запрещает такой эффект. Конкретный внешний вид эффекта зависит от среды.
Запись с суффиксом -y касается вертикальной оси. Сокращённое overscroll-behavior: contain задаёт поведение сразу для обеих осей. Если в компоненте есть горизонтальная навигация, выбирайте ось осознанно, а не отключайте всё одним правилом.
Это не полная блокировка прокрутки страницы
Свойство регулирует поведение на границе контейнера. Если пользователь прокручивает область вне панели, сама по себе эта настройка не запрещает двигать документ. Для модального интерфейса блокировка фона, клавиатура и управление фокусом требуют отдельного решения.
Не путайте настройку с overflow: одно правило определяет, как содержимое помещается и прокручивается, другое поведение на границе. Поддержку нужного значения проверяйте в целевых браузерах. Наличие свойства в справочнике не означает одинаковое поведение любого браузера и устройства.
Как проверить панель в своём макете
Разместите её на достаточно длинной странице. Прокрутите список до конца и продолжите движение над ним, затем повторите над соседней частью страницы. Сравните варианты auto и contain. Проверьте начало списка, короткое содержимое без переполнения и клавиатурную прокрутку после Tab. На сенсорном устройстве повторите жесты отдельно.
Такие компоненты удобно собирать на практическом обучении Frontend. При разборе с ментором по фронтенду принесите минимальную страницу, в которой видно оба контейнера прокрутки.
