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

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

Часто это пытаются чинить через body { overflow: hidden; }, но такой подход нередко ломает поведение на iOS, мешает sticky-элементам и даёт неприятные скачки интерфейса.

У CSS для этого есть нативное решение:
.modal {
overflow: auto;
overscroll-behavior: contain;
}

Так скролл остаётся внутри контейнера и не передаётся родителю. А если нужно полностью отключить цепочку прокрутки и overscroll-эффекты, используйте overscroll-behavior: none;.

Особенно полезно для modal, drawer, sidebar, чатов и мобильных меню.

#css #frontend #ux