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 上檢視此頁面 • 報告此內容的錯誤