Trek omlaag om te tonen

'Trekken om te onthullen' is een UI-patroon waarbij content (zoals een zoekbalk of vernieuwingsoptie) bij het eerste laden boven de bovenkant van een scrollbaar gebied wordt verborgen en de gebruiker omlaag kan trekken (omhoog scrollen) om de content te onthullen. Dit patroon wordt veelgebruikt in mobiele apps en web-apps voor zoekbalken, filters en andere secundaire bedieningselementen die toegankelijk moeten zijn, maar niet onmiddellijk zichtbaar.

De CSS-property scroll-initial-target biedt een declaratieve manier om dit patroon te implementeren met alleen CSS. Als je scroll-initial-target: nearest instelt voor het hoofdcontentelement, wordt de scrollcontainer gerenderd met de verborgen content buiten beeld gescrold. Eerder gebruikten ontwikkelaars JavaScript (Element.scrollIntoView()) of URL-fragment-ID's (#content-id) om dit te bereiken. Beide hebben beperkingen en zijn lastig te implementeren.

Implementeren

Zo implementeer je een pull-to-reveal-patroon:

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. Definieer het verborgen element: Plaats de content die je wilt verbergen (bijvoorbeeld een zoekbalk) als de eerste afstammeling in de scrollcontainer. Dit element wordt bij de eerste keer laden uit het zicht gescrold.
3. Definieer de hoofdcontent: Plaats het element voor de hoofdcontent direct na het verborgen element. Dit is het element dat de gebruiker als eerste moet zien.
4. Target de hoofdcontent: Pas scroll-initial-target: nearest toe op het hoofdcontentelement, zodat de scrollcontainer wordt gerenderd terwijl deze in beeld wordt gescrold en het element erboven wordt verborgen.
5. Scrolluitlijning toevoegen: Als je wilt zorgen dat het verborgen element altijd volledig zichtbaar of volledig verborgen is (en niet in een gedeeltelijk gescrollde staat blijft), voeg je scroll-snap-type: y mandatory toe aan de scrollcontainer en scroll-snap-align: start aan zowel het verborgen element als het element met de hoofdcontent.

Voorbeeldcode: Trekken om de zoekfunctie te tonen

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

Strategische implementatie en best practices

• Gebruik WEL scroll-initial-target: nearest als je de aandacht van de gebruiker bij het laden wilt vestigen op een specifiek deel van een scrollbaar gebied en opzettelijk perifere UI-eenheden wilt verbergen, zoals een zoekbalk helemaal bovenaan.
• 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.
• 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. Als je content wilt onthullen door te trekken, moet de hoofdcontent aan de start (bovenkant) van de container zijn gebonden.

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