Trascina per mostrare

Funzionalità web: scroll-initial-target Allineamento dello scorrimento

"Trascina per mostrare" è un pattern UI in cui i contenuti (come una barra di ricerca o un controllo di aggiornamento) sono nascosti sopra la parte superiore di un'area scorrevole al caricamento iniziale e l'utente può trascinare verso il basso (scorrere verso l'alto) per mostrarli. Questo pattern è di uso comune nelle app web e mobile per barre di ricerca, filtri e altri controlli secondari che devono essere accessibili, ma non immediatamente visibili.

La proprietà CSS scroll-initial-target offre un modo dichiarativo, solo CSS, per implementare questo pattern. Impostando scroll-initial-target: nearest sull'elemento dei contenuti principali, il container di scorrimento verrà visualizzato con i contenuti nascosti fuori dalla visualizzazione. In precedenza, gli sviluppatori si affidavano a JavaScript (Element.scrollIntoView()) o agli identificatori di frammento di URL (#content-id) per ottenere questo risultato, ma entrambi presentano limitazioni e sono difficili da implementare.

Modalità di implementazione

Per implementare un pattern pull-to-reveal:

  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. Definisci l'elemento nascosto: posiziona i contenuti che vuoi nascondere (ad es. una barra di ricerca) come primo elemento secondario all'interno del container di scorrimento. Questo elemento verrà rimosso dalla visualizzazione al caricamento iniziale.
  3. Definisci i contenuti principali: posiziona l'elemento dei contenuti principali subito dopo l'elemento nascosto. Questo è l'elemento che l'utente dovrebbe vedere per primo.
  4. Scegli come target i contenuti principali: applica scroll-initial-target: nearest all'elemento dei contenuti principali in modo che il container di scorrimento venga visualizzato con l'elemento dei contenuti principali, nascondendo l'elemento sopra.
  5. Aggiungi l'allineamento dello scorrimento: per assicurarti che l'elemento nascosto sia sempre completamente visibile o completamente nascosto (e non rimanga in uno stato di scorrimento parziale), aggiungi scroll-snap-type: y mandatory al contenitore di scorrimento e scroll-snap-align: start sia all'elemento nascosto sia all'elemento dei contenuti principali.
/**
 * ANCESTOR: Define the scroll container.
 * Scroll snapping ensures the search bar is always
 * either fully visible or fully hidden.
 */
.scroll-container {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

/**
 * HIDDEN ELEMENT: The search bar hidden above the fold on load.
 * It has scroll-snap-align so it snaps into place when pulled down.
 */
.search-bar {
  height: 60px;
  scroll-snap-align: start;
}

/**
 * MAIN CONTENT + TARGET: The element the user sees first.
 * scroll-snap-align makes it a valid snap point.
 * scroll-initial-target tells the browser to scroll here on
 * initial render, hiding the search bar above it.
 */
.main-content {
  scroll-snap-align: start;
  scroll-initial-target: nearest;
}

Implementazione strategica e best practice

  • SÌ: utilizza scroll-initial-target: nearest quando vuoi attirare l'attenzione dell'utente su una parte specifica di un'area scorrevole al momento del caricamento e nascondere intenzionalmente unità UI periferiche come una barra di ricerca nella parte superiore.
  • 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Ì: 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. Tieni presente che per trascinare i contenuti da mostrare, i contenuti principali devono essere associati alla parte start (superiore) del contenitore.

/**
 * Progressive Enhancement Fallback
 */
document.addEventListener("DOMContentLoaded", () => {
  // Check for native CSS support
  if (!CSS.supports("scroll-initial-target", "nearest")) {
    const targetContent = document.querySelector('.main-content.target');
    if (targetContent) {
      // Use behavior: "instant" to mimic the native CSS behavior
      // 'block: start' should match your CSS 'scroll-snap-align' (or expected top position)
      targetContent.scrollIntoView({ behavior: 'instant', block: 'start' });
    }
  }
});