Как укротить скролл-цепочку: магия overscroll-behavior
Слушай, бывало у тебя такое: открываешь модалку или боковое меню на мобилке, начинаешь скроллить контент внутри, доходишь до низа… и вдруг вся страница позади начинает бешено улетать вверх? Это называется scroll chaining (цепочка скролла). Пользователь в этот момент обычно чувствует легкую дезориентацию и желание закрыть твой сайт навсегда. Сегодня разберем, как решить эту проблему одной строчкой CSS, не превращая код в свалку из костылей.
Как мы страдали раньше
До появления современных свойств решение этой задачи было похоже на операцию на открытом сердце. Чтобы «заморозить» основной контент, пока открыта модалка, мы вешали на body класс с overflow: hidden. Но тут же вылезали баги: скроллбар исчезал, страница неприятно дергалась вправо, а на iOS контент все равно мог продолжать двигаться, потому что у Safari свои взгляды на жизнь.
Приходилось писать тонны JS-кода, отлавливать события touchmove и делать прочие непотребства. Кстати, если ты до сих пор мучаешься с визуальным отображением полос прокрутки, загляни в нашу статью про стилизацию скроллбара — там мы разобрались, как сделать их эстетичными везде.
Как делать правильно в 2026 году
На дворе эпоха декларативного CSS. Чтобы сказать браузеру: «Эй, если скролл внутри этого блока закончился, не трогай родителя», — нам нужно свойство overscroll-behavior. У него есть три основных значения:
- auto — поведение по умолчанию (скролл-цепочка работает).
- contain — самое полезное. Блокирует передачу скролла родителю, но сохраняет эффекты «резинового» скролла (bounce) внутри самого элемента.
- none — жесткая блокировка. Никакой цепочки и никаких визуальных эффектов отскока на границах.
Это свойство особенно круто работает в связке с современными макетами. Например, когда ты делаешь идеальную sticky-шапку и выпадающее меню в ней — overscroll-behavior: contain спасет тебя от случайного прокручивания всей страницы при взаимодействии с меню.
Готовый сниппет кода
Просто добавь этот класс любому элементу с внутренним скроллом (модалке, сайдбару или чату), и магия случится сама собой:
.scrollable-element {
/* Разрешаем внутренний скролл */
overflow-y: auto;
/* Изолируем скролл внутри элемента */
/* Теперь родительская страница не будет дергаться */
overscroll-behavior: contain;
/* Для эстетов: можно настроить отдельно по осям */
/* overscroll-behavior-y: contain; */
/* overscroll-behavior-x: none; */
}
Частая ошибка новичков
Самый частый фейл — вешать overscroll-behavior: contain на body или html в надежде, что это «просто всё починит». Запомни: это свойство должно быть на дочернем элементе, который имеет собственный скролл. Если ты применишь его к body, ты всего лишь отключишь эффект «подтягивания» страницы (pull-to-refresh) в мобильных браузерах, но не решишь проблему скролла внутри модалок.
И еще: не путай это с overflow: hidden. Свойство overscroll-behavior не прячет скроллбар и не запрещает прокрутку, оно лишь управляет тем, куда «уходит» энергия скролла, когда контент внутри элемента закончился. Используй его с умом, и твои интерфейсы станут в разы приятнее.
🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!