Горизонтальная прокрутка на мобильном: причины и решение

Горизонтальная прокрутка на мобильных устройствах - частая проблема даже у опытных верстальщиков после долгого перерыва. Вы уже добавили overflow-x: hidden для body, html и мета-тег viewport, но прокрутка остаётся. Разберём скрытые причины и методы их устранения.

Почему не помогает overflow-x: hidden?

Свойство overflow-x: hidden на body и html часто не решает проблему, если какой-то дочерний элемент выходит за пределы родительского контейнера. Браузер может игнорировать это свойство, если ширина элемента задана в процентах или vw, а также при использовании CSS-трансформаций или абсолютного позиционирования.

Основные причины боковой прокрутки на iPhone

1. Выступающие элементы с фиксированной шириной

Любой блок с width: 100vw или width: 100% плюс отступы (padding, margin) может создать лишние пиксели. Проверьте элементы с классами .container, .row, .wrapper - они часто имеют padding, который суммируется с шириной.

2. Flexbox и Grid без учёта gap

Использование gap во flex- или grid-контейнерах может увеличить общую ширину. Если сумма ширин колонок + gap превышает 100%, появляется прокрутка. Используйте box-sizing: border-box для всех элементов.

3. Абсолютно позиционированные элементы

Элементы с position: absolute или fixed могут выходить за границы экрана. Особенно часто это происходит с модальными окнами, всплывающими подсказками или декоративными псевдоэлементами (::before, ::after).

4. CSS-трансформации и анимации

Применение transform: translateX() или scale() может временно расширить область отрисовки элемента. Проверьте анимации на наличие смещений за пределы viewport.

5. Скролл внутри iframe или embed

Встроенные видео, карты или фреймы могут иметь собственную прокрутку. Добавьте overflow: hidden непосредственно на контейнер iframe.

Как найти источник прокрутки: пошаговая диагностика

• Откройте инструменты разработчика на мобильном эмуляторе (Chrome DevTools).
• Наведите на body и посмотрите на синюю область - она должна занимать ровно ширину экрана.
• Используйте поиск по overflow-x и width в стилях, чтобы найти элементы с нестандартными значениями.
• Временно отключайте блоки через display: none в инспекторе, пока прокрутка не исчезнет.

Дополнительные советы для устранения

Добавьте box-sizing: border-box глобально, чтобы padding не увеличивал ширину. Для body используйте position: relative; overflow-x: hidden; - это часто помогает. Также проверьте, нет ли в HTML лишних пробелов или переносов строк между блочными элементами (inline-block).

Если ничего не помогает, попробуйте задать max-width: 100vw для проблемного контейнера и overflow: hidden для всех прямых потомков body.