NavigateEvent: scroll() 方法

实验性： 这是一个 实验性技术
在生产环境中使用之前，请仔细查看 浏览器兼容性表。

scroll() 方法是 NavigateEvent 接口的一部分，可以手动触发浏览器驱动的滚动行为，该行为是响应导航而发生的，如果您希望在导航处理完成之前发生，则可以使用此方法。

语法

js
scroll()

参数

无。

返回值

无 (undefined)。

异常

InvalidStateError DOMException

如果当前 Document 尚未激活，或导航已取消，则会抛出此异常。

SecurityError DOMException

如果事件是由 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

浏览器兼容性

BCD 表只在启用 JavaScript 的浏览器中加载。

另请参阅