⛵️ Элемент за вьюпортом!
— 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, чтобы увидеть его на странице.
Останется только поправить пробле му и заниматься вёрсткой дальше.