Element: scrollsnapchanging 事件

可用性有限

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

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

Element 介面的 scrollsnapchanging 事件在滾動容器上觸發，當瀏覽器確定有新的滾動吸附目標待定（即，當前滾動操作結束時將被選中）時。

具體來說，在滾動操作期間，每當使用者移過潛在的新吸附目標時，都會觸發此事件。例如，使用者可以透過在觸控式螢幕裝置上拖動手指，或者在捲軸上按住滑鼠按鈕並移動滑鼠來進行緩慢滾動。因此，對於每個滾動操作，scrollsnapchanging 可能會觸發多次。

但是，如果一個滾動操作會經過多個吸附目標，該事件不會在所有潛在的目標上觸發。相反，它只會在吸附最終可能停留的最後一個目標上觸發。

語法

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

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

onscrollsnapchanging = (event) => { }

事件型別

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

示例

基本用法

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

html

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

<main> 元素可以透過結合使用 CSS scroll-snap-type 屬性和其他屬性，在滾動時吸附到其子元素，從而變成一個滾動容器。例如：

css

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

以下 JavaScript 片段會在 <main> 元素的子元素成為待定的吸附目標時，在該元素上觸發 scrollsnapchanging 事件。在處理函式中，我們在由 snapTargetBlock 屬性引用的子元素上設定一個 pending 類，該類可用於在事件觸發時對其進行不同的樣式設定。

scrollingElem.addEventListener("scrollsnapchanging", (event) => {
  // remove previously-set "pending" classes
  const pendingElems = document.querySelectorAll(".pending");
  pendingElems.forEach((elem) => {
    elem.classList.remove("pending");
  });

  // Set current pending snap target class to "pending"
  event.snapTargetBlock.classList.add("pending");
});

在函式開頭，我們選擇所有先前應用了 pending 類的元素並移除該類，以便只有最新的待定吸附目標會被設定樣式。

規範

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

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改時間為 ⁨2025年5月2日⁩，作者為 MDN 貢獻者。

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