此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
NavigateEvent:scroll() 方法
NavigateEvent 接口的 scroll() 方法可用于手动触发浏览器在导航过程中执行的滚动行为,如果希望该行为在导航处理完成之前发生,则可以调用此方法。
语法
js
scroll()
参数
无。
返回值
无(undefined)。
异常
InvalidStateErrorDOMException-
如果当前
Document尚未激活,或者导航已被取消,则抛出此异常。 SecurityErrorDOMException-
如果事件是由
dispatchEvent()调用而不是用户代理分派的,则抛出此异常。
示例
使用 scroll() 处理滚动
在这个拦截导航的例子中,handler() 函数首先获取并呈现一些文章内容,然后获取并呈现一些次要内容。尽快将页面滚动到主要文章内容以便用户与其交互是有意义的,而不是等到次要内容也呈现后再滚动。为了实现这一点,我们在两者之间添加了 scroll() 调用。
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);
},
});
}
});
规范
| 规范 |
|---|
| HTML # dom-navigateevent-scroll-dev |
浏览器兼容性
启用 JavaScript 以查看此浏览器兼容性表。
参见
- 现代客户端路由:导航 API
- 导航 API 说明
- Domenic Denicola 的导航 API 在线演示