NavigateEvent: scroll() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The scroll()
method of the
NavigateEvent
interface can be called to manually trigger the browser-driven scrolling behavior that occurs in response to the navigation, if you want it to happen before the navigation handling has completed.
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
Specification |
---|
HTML Standard # dom-navigateevent-scroll-dev |
Browser compatibility
BCD tables only load in the browser