Scrollziel für das erste Rendering festlegen

Die CSS-Property scroll-initial-target bietet eine deklarative, reine CSS-Methode, um ein bestimmtes untergeordnetes Element in den sichtbaren Bereich des Scrollcontainers zu bringen, sobald dieser Container gerendert wird. Bisher haben Entwickler JavaScript (Element.scrollIntoView()) oder URL-Fragmentbezeichner (#item-id) verwendet, die jedoch beide Einschränkungen haben und schwierig zu implementieren sind.

Implementierung

So implementieren Sie diese Funktion:

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. Element als Ziel festlegen: Wenden Sie scroll-initial-target: nearest auf das untergeordnete Element an, das Sie in den sichtbaren Bereich bringen möchten.

Beispielcode: Vertikaler Medienfeed

In diesem Beispiel wird ein Feed zu einem bestimmten „vorgestellten“ Element gescrollt, anstatt ganz oben in der Liste zu beginnen.

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

Strategische Implementierung und Best Practices

• DO use scroll-initial-target for "middle-start" experiences, such as a calendar starting on the current day or a gallery starting on a specific image.
• 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.
• DO provide dimensions for media. Da die Scrollposition während des ersten Layouts berechnet wird, sollten Bilder oder Videos aspect-ratio oder feste height/width haben, damit sich das Ziel nach dem Laden der Medien nicht verschiebt.
• 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. Verwende das Ereignis DOMContentLoaded, damit der Browser das Element in die Ansicht scrollt, sobald das HTML-Parsing abgeschlossen ist. Das ist schneller, als auf das Laden aller Bilder und Ressourcen zu warten. Alternativ können Sie das Script auch am Ende des <body>-Elements platzieren. Dann ist kein Event-Listener erforderlich.

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