Почему при загрузке страницы происходит быстрый скролл вниз, а затем вверх?

Отличный вопрос! Это распространенная проблема, имеющая несколько потенциальных причин, связанных с особенностями рендеринга HTML, CSS и JavaScript. Давайте разберем это явление максимально подробно.

Основные причины и механизмы

Это поведение, известное как "скролл-джиттер" или "прыгающий скролл", происходит из-за того, что браузер несколько раз пересчитывает layout страницы во время загрузки. Вот основные причины, отсортированные по частоте возникновения:

---

1. Изображения без указанных размеров (Самая частая причина)

Механизм:

Браузер начинает парсить HTML и строить DOM.
Когда он доходит до тега <img> без атрибутов width и height, он не может заранее зарезервировать место под изображение.
Текст и другие элементы отображаются, занимая минимум места.
Когда изображение finally загружается, браузер понимает его реальные размеры.
Чтобы accommodate новую высоту изображения, он вынужден "раздвинуть" layout, сдвигая контент вниз.
Если в этот момент пользователь уже начал скроллить, позиция скролла резко меняется.

Решение:
Всегда указывайте ширину и высоту для изображений. Это позволяет браузеру заранее зарезервировать место в layout.

<!-- ПЛОХО -->
<img src="image.jpg" alt="Описание">

<!-- ХОРОШО -->
<img src="image.jpg" alt="Описание" width="800" height="600">

В современном responsive дизайне используйте CSS aspect-ratio вместе с width/height:

img {
  width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

---

2. Динамический контент и reflow

Механизм:

Загружается первоначальный HTML с пустыми контейнерами.
JavaScript (часто в <head>) начинает выполняться и динамически добавляет контент.
Каждое добавление элемента вызывает reflow (пересчет layout).
Если контент добавляется в начало документа, он "выталкивает" существующий контент вниз.

Типичные виновники:

Рекламные скрипты
Виджеты социальных сетей
Динамически загружаемые баннеры
AJAX-запросы, заполняющие контент

Решение:

Размещайте скрипты в конце <body> или используйте defer/async
Минимизируйте DOM manipulation при загрузке
Используйте CSS content-visibility: auto для скрытых sections

---

3. Всплывающие элементы (pop-ups) и модальные окна

Механизм:

Страница загружается с скрытым модальным окном.
Скрипт показывает модальное окно, которое часто имеет position: fixed и центрируется.
Чтобы предотвратить скролл основного контента, скрипт добавляет overflow: hidden к <body>.
При скрытии модального окна (иногда автоматически) скролл возвращается к предыдущей позиции.

Решение:

Избегайте pop-ups, которые появляются сразу при загрузке
Используйте более аккуратные методы блокировки скролла

---

4. Фоновые изображения и веб-шрифты

Механизм:

Загружается HTML с текстом, отрендеренным fallback-шрифтом.
Загружается веб-шрифт (например, через Google Fonts).
Браузер перерисовывает текст, который может занять больше/меньше места.
Аналогично с background-images, которые могут изменить размеры элементов.

Решение:

Используйте font-display: swap для плавной замены шрифтов
Предзагружайте критичные шрифты: <link rel="preload">

---

5. Проблемы с Viewport и Meta Tags

Неправильные viewport meta tags могут вызывать странное поведение на мобильных устройствах:

<!-- Убедитесь, что используете правильный viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

---

6. Анимации и трансформации CSS

Сложные CSS-анимации при загрузке могут временно влиять на layout:

/* Такие анимации могут вызывать initial reflow */
.animated-element {
  transform: translateY(-100%);
  animation: slideDown 0.5s forwards;
}

---

Как диагностировать проблему

Откройте DevTools (F12) → Вкладка Performance
Запишите процесс загрузки страницы
Проанализируйте timeline: ищите множественные Layout shifts (сдвиги layout)
В Chrome Lighthouse есть метрика Cumulative Layout Shift (CLS)

---

Комплексное решение: предотвращение layout shift

Всегда указывайте размеры медиа-элементов

   <img src="..." width="600" height="400" alt="">
   <video width="640" height="360" controls></video>

Используйте CSS-контейнеры с фиксированным соотношением сторон

   .media-container {
     position: relative;
     padding-top: 56.25%; /* 16:9 Aspect Ratio */
   }
   .media-container img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
   }

Оптимизируйте порядок загрузки ресурсов

   <!-- Скрипты в конце body -->
   <script src="app.js" defer></script>

Резервируйте место для динамического контента

   .ad-container {
     min-height: 250px;
     background: #f0f0f0;
   }

Используйте современные API загрузки

   <img src="image.jpg" loading="lazy" alt="">

Заключение

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

Современные метрики веб-виталий (особенно CLS) напрямую измеряют эту проблему, и поисковые системы (как Google) учитывают это при ранжировании, так как это значительно ухудшает пользовательский опыт.

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