Хочешь, чтобы они бесили чуть меньше?
Используй
overscroll-behavior: contain;Что это делает:
Ты скроллишь модалку, доходишь до её конца и продолжаешь крутить дальше.
И тут бах, начинает скроллиться страница под ней. Модалка всё ещё открыта, но позиция на странице сзади уже уехала.
Это называется scroll chaining. Это свойство как раз это и останавливает.
Как это работает:
Когда пользователь доходит до конца прокручиваемого элемента, а модалки для этого вообще идеальный кейс, скролл просто останавливается. Он не продолжает передаваться родителю по цепочке.
На мобилках заодно не триггерит pull-to-refresh.
Где использовать:
• модалки и диалоги
• сайдбары и навигационные меню
• фиксированные контейнеры с
overflow: scroll• мобильные карусели
Поддержка браузеров: 95%
Одна строка CSS.
Модалки всё ещё бесят, но уже чуть меньше 😄
@WebDev_Plus