Как исправить горизонтальный скролл в JS

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

· CSS, JavaScript и Снипеты · 2 мин чтения

Верстальщики во время разработки сайта как правила сталкиваются с проблемой горизонтального скролла. В чем проблема? Откуда он появился? И как это исправить? Именно об этой и пойдет речь в этой записи. 

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

Первое решение

Предлагаю ваш сразу обратить внимание на этот способ.

* {
outline: 1px solid red;
}

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

Иногда после этого сразу становится понятно какой блок вылазит за границы.

Второе решение

var docWidth = document.documentElement.offsetWidth;

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

Использовать JavaScript для поиска элементов.

Откройте консоль разработчика в вашем браузере. Нажмите F12 или Ctrl + Shift + i и перейдя во вкладку «Консоль» вставьте этот код и нажмите Enter. После этого у вас должно вывести ТОЛЬКО «undefined»  или еще другие строки, например как на скриншоте ниже.

определение горизонтального скролла JS

<div id="content".. в данном случае — это тот самый элемент, который вылазит за границы сайта и вероятнее всего создает горизонтальный скролл. Посмотрите на его стили и проверьте его расположение.

Третье решение

Вам нужно выделить весь контент (заваж мышкой и начать выделять весь текст сайта) и двигать его вправо, тем самым, вы можете найти блок который вылазит за границы. Чтобы визуально представить как это происходит — смотрите GIF’ку ниже.

Выбранная область overflow

Четвертое решение (ХАК)

Если из  всего вышеперечисленного вам ничего не помогло, тогда предлагаю использовать следующий способ.

html, body {
    max-width: 100%; 
    overflow-x: hidden; 
}

Это устанавливает 100% ширину для  html и body, а так же убирает скролл по x-оси. Я не советую использовать этот способ, потому что он не решает проблему, а лишь маскирует ее.

Вывод

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

А какие способы используете вы?

Комментарии