Почему скролл пробивает модалку и начинает двигать страницу?

Частый UX-баг: скроллишь контент внутри modal или sidebar, доходишь до конца, и начинает скроллиться вся страница под ним.

Обычно это пытаются фиксить через JS и блокировку body-scroll:
body {
overflow: hidden;
}

Но это может ломать iOS-scroll, sticky и вызывать скачки layout.

CSS умеет решать это нативно:
.modal {
overflow: auto;
overscroll-behavior: contain;
}

Теперь scroll “останавливается” внутри контейнера и не передаётся родителю.

Можно полностью отключить overscroll-эффекты и scroll-chain:
.modal {
overscroll-behavior: none;
}

Это особенно полезно для modal, drawer, sidebar, chat и mobile-menu.
.chat {
overflow: auto;
overscroll-behavior: contain;
}

overscroll-behavior позволяет нативно контролировать scroll-chain и избавиться от части scroll-lock логики без дополнительных JS-хаков.

Code Ready | #совет