Imposta un target di scorrimento per il rendering iniziale

La proprietà CSS scroll-initial-target offre un modo dichiarativo, solo CSS, per portare un elemento discendente specifico nell'area visibile del relativo contenitore di scorrimento non appena viene eseguito il rendering del contenitore. In precedenza, gli sviluppatori si affidavano a JavaScript (Element.scrollIntoView()) o agli identificatori di frammento di URL (#item-id), entrambi con limitazioni e difficili da implementare.

Modalità di implementazione

Per implementare correttamente questa funzionalità:

1. Assicurati che sia presente un contenitore di scorrimento: l'elemento target deve trovarsi all'interno di un contenitore di scorrimento (un elemento con overflow che consente lo scorrimento, ad esempio overflow: auto). Può trattarsi di qualsiasi elemento predecessore, incluso l'elemento root <html>.
2. Scegli l'elemento target: applica scroll-initial-target: nearest all'elemento discendente specifico che vuoi visualizzare.

Esempio di codice: feed di contenuti multimediali verticali

In questo esempio, un feed inizia con lo scorrimento fino a un elemento "in primo piano" specifico anziché all'inizio dell'elenco.

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

Implementazione strategica e best practice

• SÌ: utilizza scroll-initial-target per le esperienze "middle-start", ad esempio un calendario che inizia con il giorno corrente o una galleria che inizia con un'immagine specifica.
• NON confondere questo concetto con lo stato attivo di accessibilità. Questa proprietà sposta solo l'area visibile visuale, non la selezione della tastiera. Devi gestire manualmente element.focus() se la destinazione deve essere il punto di partenza per gli utenti che utilizzano la tastiera.
• NON utilizzare questa proprietà se hai bisogno di un'animazione di "scorrimento" fluida al caricamento; questa proprietà è discreta e imposta la posizione istantaneamente durante la fase di layout.
• NON impostare scroll-initial-target su più elementi all'interno dello stesso contenitore scorrevole. Se più elementi specificano scroll-initial-target: nearest, il browser seleziona quello che appare per primo nell'ordine dell'albero DOM.
• SÌ: fornisci le dimensioni dei contenuti multimediali. Poiché la posizione di scorrimento viene calcolata durante il layout iniziale, assicurati che le immagini o i video abbiano aspect-ratio o height/width fissi per evitare che il target si sposti dopo il caricamento dei contenuti multimediali.
• SÌ: tieni conto della gerarchia di precedenza. Un frammento di URL (ad es. example.com/#top) e la proprietà scroll-start a livello di contenitore hanno entrambi la precedenza su scroll-initial-target.

Strategia di riserva

Per i browser che non supportano ancora l'API, utilizza un fallback JavaScript. Utilizza l'evento DOMContentLoaded per assicurarti che il browser scorra l'elemento nella visualizzazione non appena l'analisi HTML viene completata, offrendo un'esperienza più rapida rispetto all'attesa del caricamento di tutte le immagini e le risorse. In alternativa, è anche accettabile inserire lo script alla fine dell'elemento <body>, evitando così la necessità di un listener di eventi.

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