NavigateEvent: scroll() method

Syntax

scroll()

Parameters

None.

Return value

None (undefined).

Exceptions

InvalidStateError DOMException

Thrown if the current Document is not yet active, or if the navigation has been cancelled.

SecurityError DOMException

Thrown if the event was dispatched by a dispatchEvent() call, rather than the user agent.

Examples

Handling scrolling using scroll()

In this example of intercepting a navigation, the handler() function starts by fetching and rendering some article content, but then fetches and renders some secondary content afterwards. It makes sense to scroll the page to the main article content as soon as it is available so the user can interact with it, rather than waiting until the secondary content is also rendered. To achieve this, we have added a scroll() call between the two.

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);
      },
    });
  }
});

Specifications

Browser compatibility

See also

• Modern client-side routing: the Navigation API
• Navigation API explainer