Как задать цель прокрутки для начальной отрисовки

Свойство CSS scroll-initial-target позволяет декларативно, только с помощью CSS, переместить определенный дочерний элемент в видимую область его контейнера прокрутки сразу после рендеринга этого контейнера. Раньше разработчики использовали для этого JavaScript (Element.scrollIntoView()) или идентификаторы фрагментов URL (#item-id), но у обоих этих способов есть ограничения и их сложно реализовать.

Как реализовать

Чтобы успешно реализовать это:

1. Убедитесь, что контейнер прокрутки существует. Целевой элемент должен находиться внутри контейнера прокрутки (элемента с переполнением, который позволяет прокручивать, например overflow: auto). Это может быть любой элемент-предок, включая корневой элемент <html>.
2. Укажите элемент. Примените scroll-initial-target: nearest к дочернему элементу, который нужно показать.

Пример кода: фид вертикальных медиафайлов

В этом примере лента открывается на определенном рекомендуемом товаре, а не в самом начале списка.

/** 
 * TARGET: The item that should be visible on initial load.
 */
.item.target {
  scroll-initial-target: nearest;
}

Стратегическое внедрение и рекомендации

• РЕКОМЕНДУЕТСЯ использовать scroll-initial-target для элементов, которые должны открываться с середины, например календаря, который должен открываться на текущем дне, или галереи, которая должна открываться на определенном изображении.
• НЕ путайте его с фокусом специальных возможностей. Это свойство перемещает только визуальную область просмотра, но не фокус клавиатуры. Если целевой элемент должен быть начальной точкой для пользователей клавиатуры, вам нужно вручную управлять element.focus().
• НЕ используйте это свойство, если вам нужна плавная анимация прокрутки при загрузке. Оно является дискретным и мгновенно задает позицию на этапе макета.
• НЕ устанавливайте scroll-initial-target для нескольких элементов в одном прокручиваемом контейнере. Если атрибут scroll-initial-target: nearest указан для нескольких элементов, браузер выберет тот, который находится выше в дереве DOM.
• Указывайте размеры медиаконтента. Поскольку позиция прокрутки рассчитывается во время начальной компоновки, убедитесь, что изображения или видео имеют aspect-ratio или фиксированные height/width, чтобы предотвратить сдвиг цели после загрузки медиафайлов.
• УЧИТЫВАЙТЕ иерархию приоритетов. Фрагмент URL (например, example.com/#top) и свойство scroll-start на уровне контейнера имеют приоритет над scroll-initial-target.

Резервная стратегия

Для браузеров, которые пока не поддерживают API, используйте резервный вариант JavaScript. Используйте событие DOMContentLoaded, чтобы браузер прокручивал страницу до нужного элемента сразу после завершения синтаксического анализа HTML. Это быстрее, чем ждать загрузки всех изображений и ресурсов. Также можно разместить скрипт в конце элемента <body>. В этом случае прослушиватель событий не потребуется.

/**
 * Progressive Enhancement Fallback
 */
document.addEventListener("DOMContentLoaded", () => {
  // Check for native CSS support
  if (!CSS.supports("scroll-initial-target", "nearest")) {
    const feedTarget = document.querySelector(".item.target");
    if (feedTarget) {
      // 'block: center' ensures the featured media is centered in view
      feedTarget.scrollIntoView({ behavior: "instant", block: "center" });
    }
  }
});