⛵️ Элемент за вьюпортом!

03.03.2023 — JavaScript, CSS, Markup — 1 min read

Пост изначально был написан для канала в Telegram.

Раньше, когда я часто занимался вёрсткой и делал адаптивные интерфейсы, то иногда я сталкивался с тем, что некоторые элементы выходили за пределы 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, чтобы увидеть его на странице.

Останется только поправить проблему и заниматься вёрсткой дальше.