Ustawianie celu przewijania na potrzeby początkowego renderowania

Właściwość CSS scroll-initial-target umożliwia deklaratywne, oparte wyłącznie na CSS, wyświetlanie określonego elementu podrzędnego w widocznym obszarze kontenera przewijania, gdy tylko ten kontener zostanie wyrenderowany. Wcześniej deweloperzy wykorzystywali JavaScript (Element.scrollIntoView()) lub identyfikatory fragmentów adresów URL (#item-id), które mają ograniczenia i są trudne do wdrożenia.

Jak to zrobić?

Aby prawidłowo wdrożyć tę funkcję:

1. Zapewnij kontener przewijania: element docelowy musi znajdować się w kontenerze przewijania (elemencie z przepełnieniem, który umożliwia przewijanie, np. overflow: auto). Może to być dowolny element nadrzędny, w tym element główny <html>.
2. Kierowanie na element: zastosuj scroll-initial-target: nearest do konkretnego elementu podrzędnego, który chcesz wyświetlić.

Przykładowy kod: plik danych o mediach w orientacji pionowej

W tym przykładzie kanał zaczyna się od przewinięcia do konkretnego „polecanego” elementu, a nie od samej góry listy.

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

Strategiczne wdrażanie i sprawdzone metody

• UŻYWAJ scroll-initial-target w przypadku treści, które zaczynają się od środka, np. kalendarza, który zaczyna się od bieżącego dnia, lub galerii, która zaczyna się od określonego obrazu.
• NIE należy mylić tego z fokusem ułatwień dostępu. Ta właściwość przesuwa tylko widoczny obszar, a nie fokus klawiatury. Jeśli element docelowy ma być punktem początkowym dla użytkowników klawiatury, musisz ręcznie zarządzać elementem element.focus().
• NIE używaj tej właściwości, jeśli potrzebujesz płynnej animacji „przewijania” podczas wczytywania. Ta właściwość jest dyskretna i natychmiast ustawia pozycję podczas fazy układu.
• NIE ustawiaj atrybutu scroll-initial-target na wielu elementach w tym samym kontenerze z możliwością przewijania. Jeśli kilka elementów określa scroll-initial-target: nearest, przeglądarka wybiera ten, który pojawia się jako pierwszy w drzewie DOM.
• PODAJ wymiary multimediów. Pozycja przewijania jest obliczana podczas początkowego układu, dlatego upewnij się, że obrazy lub filmy mają aspect-ratio lub stałe height/width, aby zapobiec przesunięciu celu po załadowaniu multimediów.
• UWZGLĘDNIJ hierarchię pierwszeństwa: fragment adresu URL (np. example.com/#top) i właściwość scroll-start na poziomie kontenera mają pierwszeństwo przed scroll-initial-target.

Strategia zastępcza

W przypadku przeglądarek, które nie obsługują jeszcze interfejsu API, użyj zastępczego kodu JavaScript. Użyj zdarzenia DOMContentLoaded, aby przeglądarka przewinęła element do widoku, gdy tylko zakończy się analizowanie kodu HTML. Dzięki temu użytkownik nie będzie musiał czekać na załadowanie wszystkich obrazów i zasobów. Możesz też umieścić skrypt na końcu elementu <body>, co pozwoli uniknąć konieczności użycia detektora zdarzeń.

/**
 * 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" });
    }
  }
});