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 des NavigateEvent Interfaces kann aufgerufen werden, um das vom Browser gesteuerte Scrollverhalten, das als Reaktion auf die Navigation auftritt, manuell auszulösen, wenn Sie möchten, dass es passiert, bevor die Navigation abgeschlossen wurde.

Syntax

scroll()

Parameter

Keine.

Rückgabewert

Kein Wert (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 dispatchEvent() Aufruf und nicht von der Benutzeroberfläche ausgelöst wurde.

Beispiele

Handling des Scrollens mit `scroll()`

In diesem Beispiel für das Abfangen einer Navigation beginnt die handler()-Funktion mit dem Abrufen und Rendern einiger Artikelinhalte, ruft aber danach noch zusätzliche Inhalte ab und rendert sie. Es ist sinnvoll, die Seite auf den Hauptartikelinhalt zu scrollen, sobald er verfügbar ist, damit der Benutzer damit interagieren kann, anstatt zu warten, bis auch die zusätzlichen Inhalte gerendert sind. Um dies zu erreichen, haben wir einen scroll() Aufruf zwischen den beiden hinzugefügt.

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 # dom-navigateevent-scroll-dev