Zum Anzeigen ziehen

Webfunktionen: scroll-initial-target Scroll Snap

„Pull to reveal“ ist ein UI-Muster, bei dem Inhalte (z. B. eine Suchleiste oder ein Steuerelement zum Aktualisieren) beim ersten Laden über dem oberen Rand eines scrollbaren Bereichs ausgeblendet werden. Der Nutzer kann dann nach unten ziehen (nach oben scrollen), um sie einzublenden. Dieses Muster wird häufig in mobilen Apps und Web-Apps für Suchleisten, Filter und andere sekundäre Steuerelemente verwendet, die zugänglich, aber nicht sofort sichtbar sein sollen.

Die CSS-Eigenschaft scroll-initial-target bietet eine deklarative, reine CSS-Methode, um dieses Muster zu implementieren. Wenn Sie scroll-initial-target: nearest für das Hauptinhaltselement festlegen, wird der Scrollcontainer so gerendert, dass die versteckten Inhalte nicht mehr sichtbar sind. Bisher mussten sich Entwickler auf JavaScript (Element.scrollIntoView()) oder URL-Fragmentbezeichner (#content-id) verlassen, um dies zu erreichen. Beide haben Einschränkungen und sind schwierig zu implementieren.

Implementierung

So implementieren Sie ein Pull-to-Reveal-Muster:

  1. Scroll-Container verwenden: Das Zielelement muss sich in einem Scroll-Container befinden (ein Element mit Überlauf, das Scrollen ermöglicht, z. B. overflow: auto). Dies kann ein beliebiges übergeordnetes Element sein, einschließlich des Stammelements <html>.
  2. Ausgeblendetes Element definieren: Platzieren Sie den Inhalt, den Sie ausblenden möchten (z.B. eine Suchleiste), als erstes untergeordnetes Element im Scroll-Container. Dieses Element wird beim ersten Laden aus dem sichtbaren Bereich gescrollt.
  3. Hauptinhalt definieren: Platzieren Sie das Element für den Hauptinhalt direkt nach dem ausgeblendeten Element. Dies ist das Element, das der Nutzer zuerst sehen soll.
  4. Auf den Hauptinhalt ausrichten: Wenden Sie scroll-initial-target: nearest auf das Hauptinhaltselement an, damit der Scroll-Container so gerendert wird, dass der Hauptinhalt sichtbar ist und das Element darüber ausgeblendet wird.
  5. Scroll Snap hinzufügen: Damit das ausgeblendete Element immer entweder vollständig sichtbar oder vollständig ausgeblendet ist (und nicht in einem teilweise gescrollten Zustand verbleibt), fügen Sie dem Scroll-Container scroll-snap-type: y mandatory und sowohl dem ausgeblendeten Element als auch dem Hauptelement scroll-snap-align: start hinzu.
/**
 * 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 Implementierung und Best Practices

  • EMPFOHLEN: Verwenden Sie scroll-initial-target: nearest, wenn Sie die Aufmerksamkeit des Nutzers beim Laden auf einen bestimmten Teil eines scrollbaren Bereichs lenken und periphere UI-Elemente wie eine Suchleiste ganz oben absichtlich ausblenden möchten.
  • Verwechseln Sie dies NICHT mit dem Fokus für Bedienungshilfen. Mit dieser Property wird nur der visuelle Darstellungsbereich verschoben, nicht der Tastaturfokus. Sie müssen element.focus() manuell verwalten, wenn das Ziel der Ausgangspunkt für Tastaturnutzer sein soll.
  • Verwenden Sie diese Option NICHT, wenn Sie beim Laden eine flüssige „Scroll“-Animation benötigen. Diese Eigenschaft ist diskret und legt die Position während der Layoutphase sofort fest.
  • Legen Sie scroll-initial-target NICHT für mehrere Elemente innerhalb desselben scrollbaren Containers fest. Wenn mehrere Elemente scroll-initial-target: nearest angeben, wählt der Browser das Element aus, das in der DOM-Baumreihenfolge zuerst angezeigt wird.
  • BERÜCKSICHTIGEN Sie die Rangfolge: Ein URL-Fragment (z.B. example.com/#top) und die Property scroll-start auf Containerebene haben Vorrang vor scroll-initial-target.

Fallback-Strategie

Verwenden Sie für Browser, die die API noch nicht unterstützen, ein JavaScript-Fallback. Wenn du Inhalte zum Einblenden nach unten ziehen möchtest, muss der Hauptinhalt an den start (oben) des Containers gebunden sein.

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