Een scroll-doel instellen voor de eerste weergave

De CSS-eigenschap scroll-initial-target biedt een declaratieve, alleen-CSS-manier om een specifiek onderliggend element in het zichtbare gebied van de scrollcontainer te brengen zodra die container wordt gerenderd. Eerder gebruikten ontwikkelaars JavaScript (Element.scrollIntoView()) of URL-fragment-ID's (#item-id). Beide hebben beperkingen en zijn lastig te implementeren.

Implementeren

Zo implementeert u dit:

1. Zorg voor een scrollcontainer: Het doelelement moet zich in een scrollcontainer bevinden (een element met overloop dat scrollen toestaat, zoals overflow: auto). Dit kan elk bovenliggend element zijn, waaronder het rootelement <html>.
2. Het item targeten: Pas scroll-initial-target: nearest toe op het specifieke onderliggende element dat je in beeld wilt brengen.

Voorbeeldcode: verticale mediafeed

In dit voorbeeld begint een feed die is gescrold naar een specifiek uitgelicht item in plaats van helemaal bovenaan de lijst.

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

Strategische implementatie en best practices

• Gebruik scroll-initial-target WEL voor ervaringen die in het midden beginnen, zoals een agenda die op de huidige dag begint of een galerij die bij een specifieke afbeelding begint.
• Verwar dit NIET met toegankelijkheidsfocus. Deze eigenschap verplaatst alleen het visuele kijksvenster, niet de toetsenbordfocus. Je moet element.focus() handmatig beheren als het doel het startpunt is voor toetsenbordgebruikers.
• Gebruik dit NIET als je een vloeiende scrollanimatie nodig hebt bij het laden. Deze eigenschap is discreet en stelt de positie onmiddellijk in tijdens de vormgevingsfase.
• Stel scroll-initial-target NIET in voor meerdere elementen in dezelfde scrollbare container. Als meerdere elementen scroll-initial-target: nearest specificeren, selecteert de browser het element dat als eerste verschijnt in de volgorde van de DOM-boomstructuur.
• WEL: Geef afmetingen voor media op. Omdat de scrollpositie wordt berekend tijdens de eerste opmaak, moet je zorgen dat afbeeldingen of video's aspect-ratio of een vaste height/width hebben om te voorkomen dat het doel verschuift nadat de media zijn geladen.
• Houd rekening met de voorrangshiërarchie: Een URL-fragment (bijv. example.com/#top) en de property scroll-start op containerniveau hebben beide voorrang op scroll-initial-target.

Reservestrategie

Gebruik een JavaScript-fallback voor browsers die de API nog niet ondersteunen. Gebruik de gebeurtenis DOMContentLoaded om te zorgen dat de browser het element in beeld scrollt zodra de HTML-parsering is afgerond. Dit is sneller dan wachten tot alle afbeeldingen en bronnen zijn geladen. U kunt het script ook aan het einde van het element <body> plaatsen. Dan heeft u geen event-listener nodig.

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