Как найти горизонтальный скролл на сайте

Содержание

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

Вариант 1

Задать в стилях CSS код:



* {
outline: 1px solid red;
}

* {

outline: 1px solid red;

}

Код №1: Задает в CSS всем элементам красную обводку.

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

Кстати, чтобы код стилей можно вставить непосредственно в консоли браузера, чтобы не лезть в файлы стилей или настройки, просто откройте консоль браузера (F12) во вкладке «Elements», через контекстное меню ПКМ выберите «Edit as HTML» (редактировать как HTML) и вставьте где-нибудь код выше, обернув в тег style — <style>Код</style>.

Обвод красным всех элементов на странице сайта — Изображение 1: Указание стилей в консоли браузера

Вариант 2

В консоли браузера (F12) «Console» вставляем JS-Код №2 и нажимаем Enter:



var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(

document.querySelectorAll('*'),

function(el) {

if (el.offsetWidth > docWidth) {

console.log(el);

}

);

Код №2: Фокус и Концентрация (Без вокала — только немного в несколько мгновений).

После выполнения кода должно вывести «undefined» или еще другие строки, например <div class="site">...</div> — это и будет тем элементом на который стоит обратить внимание, он скорее всего и создает горизонтальную прокрутку.

Как найти что дает скроллинг на сайте — Изображение 2: Примерно такой результат кода из второго варианта

Источник