Раньше, когда я часто занимался вёрсткой и делал адаптивные интерфейсы, то иногда я сталкивался с тем, что некоторые элементы выходили за пределы viewport и появлялись зоны горизонтального скролла.
Не всегда совсем очевидно, какой именно элемент вызвал это поведение, иногда его физически можно даже не увидеть на странице.
Для таких случаев я пользовался следующим хаком, через кастомный CSS:
*,
*:after,
*:before {
outline: 1px solid red;
}
На все элементы на странице вешаем красный outline в 1px и находим виновников поехавшей вёрстки.
Сегодня увидел более элегантное решение с использованием JavaScript:
document.querySelectorAll('*').forEach((el) => {
if (el.offsetWidth > document.documentElement.offsetWidth) {
console.log(el);
}
});
Ищем всем элементы на странице, если offsetWidth элемента больше, чем offsetWidth нашего документа — выводим элемент в консоль, а уже после этого мы можем (как минимум, в Chrome) нажать правой кнопкой на элемент в консоли и выбрать Scroll into view, чтобы увидеть его на странице.
Останется только поправить проблему и заниматься вёрсткой дальше.