NavigateEvent: scroll()-Methode

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die scroll()-Methode der NavigateEvent-Schnittstelle kann aufgerufen werden, um das vom Browser gesteuerte Scrollverhalten manuell auszulösen, das als Reaktion auf die Navigation auftritt, falls Sie es vor Abschluss der Navigation auslösen möchten.

Syntax

js
scroll()

Parameter

Keine.

Rückgabewert

Keine (undefined).

Ausnahmen

InvalidStateError DOMException

Wird ausgelöst, wenn das aktuelle Document noch nicht aktiv ist oder wenn die Navigation abgebrochen wurde.

SecurityError DOMException

Wird ausgelöst, wenn das Ereignis durch einen Aufruf von dispatchEvent() anstelle des Benutzeragenten ausgelöst wurde.

Beispiele

Umgang mit Scrollen mittels scroll()

In diesem Beispiel zum Abfangen einer Navigation beginnt die handler()-Funktion mit dem Abrufen und Rendern einiger Artikelinhalte und ruft dann im Anschluss einige sekundäre Inhalte ab und rendert diese. Es ergibt Sinn, die Seite zu den Hauptartikelinhalten zu scrollen, sobald diese verfügbar sind, damit der Benutzer damit interagieren kann, anstatt zu warten, bis auch die sekundären Inhalte gerendert sind. Um dies zu erreichen, haben wir einen scroll()-Aufruf zwischen den beiden eingebaut.

js
navigation.addEventListener("navigate", (event) => {
  if (shouldNotIntercept(navigateEvent)) {
    return;
  }
  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);

        event.scroll();

        const secondaryContent = await getSecondaryContent(url.pathname);
        addSecondaryContent(secondaryContent);
      },
    });
  }
});

Spezifikationen

Specification
HTML Standard
# dom-navigateevent-scroll-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch