overscroll-behavior: передача прокрутки внешнему контейнеру
overscroll-behavior управляет поведением на границе прокручиваемой области, включая передачу прокрутки предку.
Назначение
overscroll-behavior управляет поведением на границе прокручиваемой области, включая передачу прокрутки предку.
Как это работает
contain ограничивает цепочку прокрутки, сохраняя некоторые локальные эффекты. none дополнительно подавляет определённые эффекты выхода за границу. Это не универсальная блокировка прокрутки всего документа.
Пример
<style>
.log{height:140px;overflow:auto;overscroll-behavior:contain;border:1px solid;padding:12px}.long{height:360px}
</style>
<div class="log" tabindex="0" aria-label="Учебный журнал"><div class="long">Длинное содержимое отдельного журнала.</div></div>Что должно получиться
На границе журнала прокрутка не должна обычным образом передаваться внешней области там, где поведение поддерживается. Внутренняя прокрутка при этом остаётся доступной.
Граница применения и частая ошибка
Не запрещайте привычную прокрутку без причины. Небольшая вложенная область должна оставаться понятной и доступной с клавиатуры; свойство не решает управление фокусом модального окна.
Самостоятельная проверка
Дойдите до конца вложенного журнала колесом и сравните contain с auto. Затем проверьте клавиатуру и сенсорное устройство: детали краевых эффектов зависят от платформы.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.