Горизонтальная прокрутка на телефоне: как найти причину на сайте

Если сайт двигается вправо и влево на телефоне, сначала определите, что прокручивается: отдельная таблица или вся страница — исправление зависит от источника переполнения

Скрыть боковую прокрутку одним правилом CSS кажется быстрым решением — но вместе с полосой можно потерять столбец таблицы, часть текста или доступ к кнопке

Ниже — порядок диагностики для владельца сайта и ориентиры для разговора с разработчиком — точное изменение кода выбирается после воспроизведения ошибки

Когда прокрутка является нормальным поведением

Большая сравнительная таблица может прокручиваться внутри своего блока — это допустимое проектное решение, если посетитель понимает, что есть продолжение, и может прочитать все значения

При этом шапка, основной текст и нижние блоки остаются на месте — если сдвигается весь сайт и рядом возникает пустое поле, вероятно, какой-то элемент расширяет страницу

Проверьте это отдельно на таблице и на обычном абзаце — одинаковый жест пальцем в разных областях помогает описать наблюдение, но сам по себе не называет CSS-причину

Карусель, сравнение и широкая схема тоже могут иметь локальное горизонтальное движение — их поведение нужно оценивать по назначению, а не запрещать любую прокрутку

Как повторить ошибку

Запишите точный URL, браузер, телефон и ориентацию — откройте страницу заново и отметьте, появляется ли проблема сразу или после загрузки изображения, открытия меню либо поворота экрана

Найдите первый блок, около которого заметно смещение — сделайте снимок и сохраните действия, а не только итоговый пустой край

Если проблема возникает в одном встроенном сервисе, проверьте и страницу без взаимодействия с ним — внешняя карта, виджет или видео могут иметь собственные ограничения

В общем журнале мобильной проверки для этого есть поля — к задаче полезно приложить также момент, когда ошибка исчезает при увеличении ширины

Какие причины проверить разработчику

Частые кандидаты — фиксированная ширина, длинная неразрывная строка, широкое медиа, отступы поверх заданной ширины и элементы сетки, которые не могут сжаться до доступного пространства

Это список направлений диагностики, а не диагноз по внешнему виду — похожий пустой край может возникать у разных элементов и только в определённом состоянии

У flex- и grid-элементов автоматическая минимальная ширина иногда определяется содержимым — это поведение описано в справке MDN о min-width

Из этого не следует, что min-width: 0 нужно добавить всем элементам — правило помогает в конкретной модели компоновки и требует проверки текста и соседних блоков

Как разработчику сузить поиск

Сначала верните страницу к левому краю и воспроизведите нужное состояние — если ошибка появляется после открытия меню, оставьте его открытым — затем начинайте измерение

Шаг 1 — подтвердить, что расширяется документ

В DevTools откройте Console — следующие выражения только читают размеры текущей страницы, не отправляют данные и не меняют её код

({
  available: document.documentElement.clientWidth,
  content: document.documentElement.scrollWidth
})

В учебном примере результат может быть available: 360, content: 640 — доступная область уже содержимого, поэтому документу действительно требуется лишняя горизонтальная ширина

Если размеры равны, вернитесь к области жеста — возможно, двигается только таблица или карусель, а не документ — измерение нужно сопоставлять с тем, что вы наблюдали на экране

MDN определяет scrollWidth как ширину содержимого, включая часть, которая не видна из-за переполнения — это показатель размера, а не название виновного CSS-правила

Шаг 2 — найти кандидатов за границей

Выберите подозрительный блок инструментом выбора элемента в DevTools — на панели Elements посмотрите его размеры и расположение — начните с таблицы, изображения или панели, рядом с которыми заметили смещение

Для длинной страницы можно получить список элементов, чьи прямоугольники выходят за область просмотра — этот вспомогательный пример возвращает первые 30 кандидатов

(() => {
  const width = document.documentElement.clientWidth;
  return [...document.querySelectorAll('body *')]
    .map(node => ({ node, box: node.getBoundingClientRect() }))
    .filter(({ box }) => box.width > 0 &&
      (box.left < -1 || box.right > width + 1))
    .slice(0, 30)
    .map(({ node, box }) => ({
      node,
      left: Math.round(box.left),
      right: Math.round(box.right)
    }));
})()

Раскройте результат и перейдите к элементу на панели Elements — getBoundingClientRect показывает геометрию относительно области просмотра

Список не равен списку ошибок — в нём могут оказаться родительские обёртки, содержимое локально прокручиваемой таблицы, намеренно вынесенное за экран закрытое меню или декоративный элемент — псевдоэлемент вообще не является отдельным узлом этого списка

Задача этого шага — найти небольшой участок для проверки — если за экраном находятся контейнер, строка и таблица внутри него, начните с самой конкретной широкой части, а не удаляйте весь контейнер

Шаг 3 — проверить правило, которое задаёт лишний размер

В Styles или Computed у выбранного элемента найдите width, min-width, правила переноса, отступы и положение — затем посмотрите, какое из них действительно действует в текущем диапазоне ширины

Временно отключите одно подозрительное правило галочкой в DevTools — после этого снова сравните размеры документа и убедитесь, что содержимое осталось доступно

Если отключить сразу несколько правил или скрыть весь блок, причина останется неясной — вы увидите только исчезновение симптома вместе с частью страницы

Запишите подтверждение в задаче: какой элемент выбран, какое правило меняли, что стало с шириной и содержимым — временное изменение в DevTools ещё нужно перенести в исходный компонент и проверить в сборке

Разбор двух типичных причин

Широкая таблица внутри гибкой колонки

Учебная страница имеет основной материал и боковую колонку — внутри материала находится таблица с шестью столбцами — на телефоне таблица требует 640 пикселей и растягивает всю страницу

Добавление прокрутки вокруг таблицы может оказаться недостаточным, если сама flex-колонка не сжимается из-за своего минимального размера — тогда разработчик проверяет и таблицу, и её родителя

Для такой конкретной структуры решение может выглядеть так

.main-column {
  flex: 1;
  min-width: 0;
}

.comparison-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.comparison {
  min-width: 640px;
}

Здесь .main-column — элемент flex-компоновки, .comparison-scroll — обёртка, а .comparison — сама таблица — имена и структура приведены для учебного разбора, это не изменение действующего сайта

Смысл решения: основная колонка может занять доступное место, таблица сохраняет необходимую ширину и прокручивается в своей области — все шесть столбцов остаются в документе

При приёмке проверьте не только жест пальцем, но и доступ к прокручиваемой области с клавиатуры — её назначение должно быть понятно, а последний столбец достижим

Изображение или строка шире своего блока

Другой учебный случай — в статье вставили иллюстрацию с фиксированной шириной 960 пикселей, хотя колонка на телефоне значительно уже — соседние абзацы помещаются, а общий документ расширяется после появления картинки

Выберите изображение, проверьте его фактический размер и действующее правило ширины — если причина подтверждена, исправление должно ограничить показ доступной областью и сохранить пропорции

Для длинной строки последовательность похожа, но само решение другое — нужно определить, допустим ли перенос текста или ему нужна локальная прокрутка, как у фрагмента кода

При этом нельзя менять значение адреса или артикула ради красивой строки — перенос относится к отображению, а копируемое содержание должно сохраняться

В обоих случаях повторите проверку после полной загрузки страницы — снимок до появления изображения или внешнего блока может ошибочно показать отсутствие переполнения

Как проверить, что найден именно источник

Верните временно отключённое правило — если прежняя ошибка снова появилась в тех же условиях, связь с этим правилом стала понятнее — затем повторите выбранное исправление и проверьте сохранность содержимого

Не останавливайтесь на одном совпадении — например, скрытие меню может уменьшить общую ширину, но проблема может находиться в широкой дочерней ссылке, а не в размере всей панели

В задаче полезно сохранить цепочку: состояние страницы → выбранный элемент → действующее правило → изменение размера → проверка текста и действий

После переноса исправления в исходники повторите измерение на собранной странице — временная правка в DevTools не подтверждает, что изменён нужный компонент или диапазон ширины в рабочем коде

Какой вывод сохранить после разбора

Для таблицы результатом может быть запись «все данные сохранены, прокручивается только блок сравнения» — для изображения «показ ограничен колонкой, соотношение сторон прежнее»

Это разные критерии — общее требование «убрать горизонтальный скролл везде» могло бы привести к обрезке таблицы, хотя изображения действительно должны помещаться целиком

Когда таблице нужен другой мобильный вид

Иногда переполнение вызвано не случайной ошибкой, а объёмом данных — шесть содержательных столбцов нельзя сделать удобными, просто сжав каждый до нескольких букв

Сначала уточните, как посетитель использует таблицу — сравнивает несколько вариантов по одному признаку или читает все условия одного варианта подряд

В первом случае сохранение общей таблицы может быть полезнее — важно видеть связь строк и столбцов, понимать наличие продолжения и добираться до края

Во втором случае можно обсудить карточки или последовательные группы — но при таком преобразовании каждое значение должно сохранить свою подпись, иначе читаемая карточка потеряет смысл исходной таблицы

Такое решение лучше согласовать до CSS-правки — скрытие «второстепенных» столбцов на телефоне может удалить именно условие, ради которого человек открыл страницу

Если владелец выбрал новое представление, добавьте его в критерии приёмки — разработчик должен понимать, что теперь проверяется не только отсутствие лишней ширины, но и соответствие двух представлений данных

Как закрыть задачу учебной таблицы

В исходной записи сохранены ширина документа, состояние и шесть столбцов — после исправления проверяющий снова открывает тот же пример, измеряет документ и доходит до последней ячейки

Для выбранной локальной прокрутки результат записывается по двум уровням: основной документ помещается в экран, а область сравнения сохраняет собственное широкое содержимое

Затем проверяются соседняя ширина, клавиатура и другой адрес с тем же компонентом — если данные сохранились только на первой странице, общий компонент ещё нельзя считать принятым

В итоговой строке остаются фактические размеры и результат прохода — учебные 360 и 640 служили объяснением метода, а в реальной задаче должны быть собственные значения

Почему overflow-x: hidden не является готовым исправлением

overflow задаёт поведение содержимого, которое не помещается в контейнер — MDN различает обрезку и прокрутку, а не объявляет скрытие универсальным способом адаптации

Если спрятать всё выходящее за край у корня страницы, визуальный симптом может исчезнуть — при этом посетитель потеряет доступ к части интерфейса

Обрезка бывает намеренной у декоративного элемента — тогда нужно убедиться, что за пределами области нет текста, действий и видимого индикатора фокуса

Учебный пример: правая колонка с ценой вышла за экран — после overflow-x: hidden сайт перестал двигаться, но цена осталась за границей — такая правка не проходит приёмку

Как поставить задачу без назначения неверного CSS

Запишите наблюдение и требуемое поведение — не требуйте конкретного свойства, если причина ещё не найдена

Пример задачи: «На странице сравнения при узкой ширине вся страница прокручивается вправо — таблица содержит шесть столбцов — сохранить все данные и ограничить горизонтальную прокрутку областью таблицы, остальные блоки должны помещаться в экран»

Если бизнесу важнее сравнение без бокового движения, понадобится другое представление данных — это уже продуктовое или дизайнерское решение, которое следует согласовать отдельно

Для такого случая используйте матрицу адаптивной вёрстки — она помогает записать, какое поведение выбрано, до внесения изменений

Как проверить, что исправление закончено

Соберите короткую матрицу повторного прохода — она помогает не ограничиться одним удачным снимком

Если исправлялся общий компонент таблицы или медиа, добавьте другой адрес с тем же компонентом — локально подобранная высота или обрезка могут выглядеть удачно только на одном содержимом

На странице вёрстки KEIVO описаны работы с интерфейсом — для обсуждения локальной проблемы достаточно начать с карточки ошибки, без предположения о полном редизайне

Скачать карточку ошибки переполнения — с учебным примером и отдельной проверкой сохранности данных

Что должно быть в карточке

Текстовая самопроверка: условия воспроизведения, область смещения, сохранность содержимого и соседние ширины — чек-лист не ищет CSS-ошибку автоматически

Источники проверены 31 октября 2026 года — примеры и порядок диагностики подготовлены редакцией KEIVO