Как найти элемент на странице из-за которого происходит горизонтальный скролл?

Опубликовано: 

Многие веб-разработчики во время верстки html страницы сталкиваются с неприятным моментом — горизонтальным скроллом страницы.

Можно попытаться через консоль удалять объекты вручную, в надежде найти причины горизонтального скролла.

Можно принудительно прописать в CSS overflow-x: hidden, но это тоже не срабатывает.

Есть очень простое решение:

  1. открываем консоль ctrl+shift+i
    Как найти элемент на странице из-за которого происходит горизонтальный скролл? | 1
  2. переходим во вкладку Console (Консоль) и вставляем следующий код:
(function (d) {
    var w = d.documentElement.offsetWidth,
        t = d.createTreeWalker(d.body, NodeFilter.SHOW_ELEMENT),
        b;
    while (t.nextNode()) {
        b = t.currentNode.getBoundingClientRect();
        if (b.right > w || b.left < 0) {
            t.currentNode.style.setProperty('outline', '1px dotted red', 'important');
            console.log(t.currentNode);
        }
    };
}(document));
  1. нажимаем Enter и в консоле будут выведены все элементы, чья ширина превышает границы BODY + данные элементы будут подсвечены красной линией

Или можно создать закладку в браузере и вместо адреса прописать:

javascript:(function(d){var w=d.documentElement.offsetWidth,t=d.createTreeWalker(d.body,NodeFilter.SHOW_ELEMENT),b;while(t.nextNode()){b=t.currentNode.getBoundingClientRect();if(b.right>w||b.left<0){t.currentNode.style.setProperty('outline','1px dotted red','important');console.log(t.currentNode);}};}(document));

Данное решение было найдено на просторах https://stackoverflow.com/, пример кода есть на https://gist.github.com/cuth/c1ddf2b1ce2fb07e512a

Наверх