Горизонтальная прокрутка: найти элемент, расширяющий страницу

Назначение

Неожиданная горизонтальная прокрутка часто вызвана одним широким элементом. Упражнение помогает найти кандидатов и проверить причину, не пряча весь избыток через overflow:hidden.

Как это работает

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

Пример

const width = document.documentElement.clientWidth;
const candidates = [...document.body.querySelectorAll("*")].filter(element => {
  const rect = element.getBoundingClientRect();
  return rect.right > width + 1 || rect.left < -1;
});
console.log(candidates);

Что должно получиться

На своей учебной странице консоль показывает элементы-кандидаты. Код не меняет стили и не удаляет узлы. Допуск в один пиксель снижает шум от небольших дробных расхождений.

Граница применения и частая ошибка

Проверка ориентирована на текущее окно и положение прокрутки; она не заменяет осмотр всех состояний. На очень большом DOM полный обход затратен. Скрытие overflow у body может обрезать меню и контуры фокуса, не устранив исходную причину.

Самостоятельная проверка

Добавьте намеренно широкую таблицу или длинную строку в тестовый документ. Найдите источник, затем проверьте min-width, размеры и переносы именно у него. Повторите опыт на нескольких ширинах и при увеличенном тексте.

Связанные материалы

• Локальный просмотр
• Вычисленные стили
• Повторная проверка