Element: scrollsnapchange 事件

可用性有限

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

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

scrollsnapchange 事件是 Element 介面的一個事件，當滾動操作結束，並且一個新的滾動捕捉目標被選定時，會在滾動容器上觸發，緊隨其後會觸發相應的 scrollend 事件。

當用戶在滾動容器內完成滾動操作（例如，使用觸控手勢或透過拖動捲軸上的滑鼠指標）並釋放手勢時，滾動操作結束。

語法

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

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

onscrollsnapchange = (event) => { }

示例

基本用法

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

html

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

可以透過 CSS 的 scroll-snap-type 屬性和其他屬性的組合，將 <main> 元素變成一個在滾動時捕捉其子元素的滾動容器。例如：

css

main {
  width: 250px;
  height: 450px;
  overflow: scroll;
  scroll-snap-type: block mandatory;
}

以下 JavaScript 程式碼片段會在 <main> 元素的其中一個子元素成為新選中的捕捉目標時，在 <main> 元素上觸發 scrollsnapchange 事件。在處理函式中，我們為由 SnapEvent.snapTargetBlock 屬性引用的子元素新增一個 selected 類，該類可以用於在事件觸發時對其進行樣式設定，使其看起來像是被選中了（例如，帶有動畫）。

const scrollingElem = document.querySelector("main");

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