Выявляем элемент HTML, вызывающий вертикальный скролл

Быстрый ответ

Для определения элемента, порождающего вертикальный скроллбар, воспользуйтесь Инструментами разработчика Chrome. Нажмите F12, выберите вкладку Элементы и примените стиль overflow: hidden; к элементам в разделе Стили. В случае исчезновения скроллбара при изменении свойства некоторого элемента, мы получим искомый элемент. Пример кода для проверки:

/* Применяем к предполагаемым нарушителям */
.element { overflow: hidden; }

Получение данных о нарушителе с использованием CSS

Один из надёжных способов отыскать проблемный элемент — выделить каждый элемент красной рамкой — поставить сеть для подозреваемых. Для этого используйте следующий код:

/* Каждый элемент получает красную рамку */
* { outline: 1px solid red; }

Это не изменит вёрстку, но покажет, какой элемент выходит за границы видимой области.

Используем JavaScript для обнаружения нарушителей

Если требуется более мощный инструмент, можно использовать JavaScript. Следующая функция проведёт анализ, проверяя каждый элемент на наличие свойств прокрутки:

function findScroller(element) {
  /* Элементы, у которых scrollHeight больше clientHeight, вызывают подозрение */
  if (element.scrollHeight > element.clientHeight) {
    console.log(element);
  }
  /* Исследуем каждый дочерний элемент */
  Array.from(element.children).forEach(findScroller);
}

findScroller(document.body);

Проверка внешних элементов: iframes и элементы за экраном

IFrames и элементы, расположенные вне видимой области, часто становятся источниками скроллбаров. Используйте display: none; или временно удалите их, чтобы узнать, связана ли с ними проблема:

/* Скрываем iframes и элементы вне видимой области */
iframe, .offscreen-element { display: none; }

Избегаем недопонимания с padding вместо margins

Смешение понятий отступов может привести к трудно разрешимым ситуациям. Заменив margin-top на padding-top, вы сделаете вёрстку более предсказуемой и уменьшите шансы появления скроллбара:

/* Используем padding-top вместо margin-top */
.nav-adjustment { padding-top: 20px; }

Выделение через элементы в Chrome

Если вы предпочитаете визуальную отладку, выделите каждый элемент с помощью Инструментов разработчика Chrome.

Изучаем CSS селекторы для работы

Можно обращаться напрямую к элементам с помощью CSS селекторов — часто это самое простое решение:

/* Обращаемся напрямую к элементам с помощью селекторов */
#content, .main, .wrapper { overflow: hidden; }

Понимание механизма схлопывания отступов и padding

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

Использование Array.from() и слушателей событий в JavaScript

Для отлавливания скроллбара можно организовать "засаду" с помощью Array.from() и слушателей событий, которые будут отслеживать изменения и выявлять проблемные элементы.

Обращаемся за помощью к сообществу

Не стесняйтесь обращаться за советом к опытным JavaScript-разработчикам, решавшим подобные задачи.

Полезные материалы

1. Новые вопросы по 'css' – Stack Overflow — площадка для обсуждения проблем, связанных с переполнением и CSS.
2. overflow – CSS: Каскадные таблицы стилей | MDN — информация Mozilla Developer Network о свойстве overflow.
3. Поиск/Исправление Нежелательного Переполнения Body | CSS-Tricks — статья о способах борьбы с ошибками, связанными с переполнением.
4. Просмотр и изменение CSS | Инструменты разработчика | Chrome для разработчиков — руководство по использованию Инструментов разработчика Chrome для исправления CSS.
5. CSS Overflow — обзор методов решения проблем с переполнением контента.
6. html – Скрыть полосу прокрутки, но продолжая быть способными скроллить – Stack Overflow — обсуждение способов скрытия скроллбара без потери возможности прокрутки.