SnapEvent

建構函式

SnapEvent() 實驗性

建立一個新的 SnapEvent 物件例項。

例項屬性

繼承其父級 Event 的屬性。

snapTargetBlock 只讀 實驗性

返回一個在事件觸發時吸附到塊方向的元素的引用，如果滾動吸附只發生在內聯方向，則沒有元素吸附到塊方向，則返回 null。

snapTargetInline 只讀 實驗性

返回一個在事件觸發時吸附到內聯方向的元素的引用，如果滾動吸附只發生在塊方向，則沒有元素吸附到內聯方向，則返回 null。

示例

scrollsnapchanging 示例

在下面的 scrollsnapchanging 處理函式片段中，我們使用 Element.className 屬性將 snapTargetBlock 元素的 class 屬性設定為 pending，這可以用於在元素成為一個待定的吸附目標時對其進行不同的樣式設定。

請注意，此處理函式旨在設定在一個塊方向的滾動容器上（如果頁面設定為水平 writing-mode，則為垂直滾動），因此在多個事件觸發之間只有 snapTargetBlock 元素會發生變化。SnapEvent.snapTargetInline 將返回 null，因為在內聯方向沒有發生吸附。

scrollingElem.addEventListener("scrollsnapchanging", (event) => {
  // Set current pending snap target class to "pending"
  event.snapTargetBlock.className = "pending";

  // Logs the new pending block-direction snap target element
  console.log(event.snapTargetBlock);

  // Logs null; no inline snapping occurs
  console.log(event.snapTargetInline);
});

scrollsnapchange 示例

在下面的 scrollsnapchange 處理函式片段中，我們在 SnapEvent.snapTargetBlock 元素上設定了一個 selected 類，這可用於為新選中的吸附目標設定樣式，使其看起來已被選中（例如，帶有動畫）。

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

規範

瀏覽器相容性

另見

• scrollsnapchanging 事件
• scrollsnapchange 事件
• CSS 滾動吸附模組
• 使用滾動捕捉事件
• developer.chrome.com 上的滾動捕捉事件 (2024)