NavigateEvent: scroll() 方法

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

scroll() 方法是 NavigateEvent 接口的一部分，如果希望在导航处理完成之前触发浏览器导航行为引起的滚动，可以调用此方法。

语法

scroll()

参数

无。

返回值

无 (undefined)。

异常

InvalidStateError DOMException: 如果当前 Document 尚未激活，或者导航已被取消，则会抛出此异常。
SecurityError DOMException: 如果事件是由 dispatchEvent() 调用而非用户代理触发的，则会抛出此异常。

示例

使用 `scroll()` 处理滚动

在此拦截导航的示例中，handler() 函数首先获取并渲染一些文章内容，然后稍后获取并渲染一些次要内容。在次要内容也渲染完成之前，将页面滚动到主要文章内容区域，以便用户可以与之交互，这是有意义的。为了实现这一点，我们在两者之间添加了一个 scroll() 调用。

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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年7月3日⁩，作者为 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的错误