文件：scrollsnapchange 事件

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性： 這是一項實驗性技術
在生產中使用此技術之前，請仔細檢查瀏覽器相容性表格。

scrollsnapchange 事件是 Document 介面的一個事件，在滾動操作結束時，當一個新的滾動捕捉目標被選中時，會在文件滾動容器上觸發。

此事件的工作方式與 Element 介面的 scrollsnapchange 事件非常相似，不同之處在於整個 HTML 文件必須被設定為滾動捕捉容器（即，在 <html> 元素上設定了 scroll-snap-type）。

語法

在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。

addEventListener("scrollsnapchange", (event) => { })

onscrollsnapchange = (event) => { }

事件型別

一個 SnapEvent，它繼承自通用的 Event 型別。

示例

基本用法

假設我們有一個 <main> 元素，其中包含大量會導致其滾動的內容。

html

<main>
  <!-- Significant content -->
</main>

可以透過組合 CSS 屬性將 <main> 元素轉變為滾動容器，例如：

css

main {
  width: 250px;
  height: 450px;
  overflow: scroll;
}

然後，我們可以透過在 <html> 元素上指定 scroll-snap-type 屬性，來為滾動內容實現滾動吸附行為。

css

html {
  scroll-snap-type: block mandatory;
}

下面的 JavaScript 程式碼片段將導致當 <main> 元素的子元素成為新選中的捕捉目標時，在 HTML 文件上觸發 scrollsnapchange 事件。在處理函式中，我們在 SnapEvent.snapTargetBlock 引用的子元素上設定一個 selected 類，該類可以在事件觸發時用於為其設定樣式，使其看起來像是被選中了（例如，透過動畫）。

document.addEventListener("scrollsnapchange", (event) => {
  event.snapTargetBlock.classList.add("selected");
});

規範

規範
CSS 滾動捕捉模組級別 2 # scrollsnapchange

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁最後修改於 2025年5月2日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的潛在問題