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

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

Как найти что делает прокрутку на сайте

Содержание

Вариант 1

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

</p>
<p>* {<br />
outline: 1px solid red;<br />
}</p>
<p>

* {

outline: 1px solid red;

}

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

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

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

Обвод красным всех элементов на странице сайта

Изображение 1: Указание стилей в консоли браузера

Вариант 2

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

</p>
<p>var docWidth = document.documentElement.offsetWidth;<br />
[].forEach.call(<br />
  document.querySelectorAll(‘*’),<br />
  function(el) {<br />
    if (el.offsetWidth > docWidth) {<br />
      console.log(el);<br />
    }<br />
  }<br />
);</p>
<p>

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(

document.querySelectorAll(‘*’),

function(el) {

if (el.offsetWidth > docWidth) {

console.log(el);

}

);

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

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