捲動貼齊事件

在 Chrome 129 中，您可以使用 JavaScript 的 scrollSnapChange 和 scrollSnapChanging 事件。透過實作內建的貼齊事件，先前看不見的快照狀態將可以在適當時機變成可行的，並且永遠正確。刪除這些事件並不方便。

在 scrollSnapChange 之前，您可以使用交集觀察器找出哪些元素跨越捲動通訊埠，但判斷哪些元素僅限於少數情況。舉例來說，您可以偵測貼齊項目是否填滿捲動通訊埠，或是填滿大多數捲動通訊埠。如要這麼做，您需要觀察捲動區域的交集元素，再根據佔用大部分捲動區域的項目，假設這是貼齊目標，然後等待 scrollend 並在已貼齊的項目 (貼齊目標) 時採取行動。

然而，在 scrollSnapChanging 之前，無法得知貼齊目標何時變更，或是貼齊目標的變更 (例如捲動快速滑過的情況)。

好消息！這些新活動可讓您輕鬆快速地取得相關資訊。如此一來，捲動貼齊互動就能超越其現有功能，並可以協調捲動貼齊關係和最新 UI 意見回饋情境。

scrollSnapChange

只有在捲動手勢導致新的貼齊目標未以下列順序重新啟用時，才會觸發這個事件

1. 捲動休息後。
2. scrollend前。

這個事件只會在 scrollend 之前、捲動完成，以及只在新的貼齊目標放下時觸發。這使得在捲動手勢完成時，事件會感到延遲或即時。

scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchange = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

該事件會在事件物件上，將貼齊的項目公開為 snapTargetBlock 和 snapTargetInline。如果捲軸只有水平，snapTargetBlock 屬性會是 null。屬性值會是元素節點。

ScrollSnapChange 的專屬詳細資料

在使用者放開手勢後不會觸發

螢幕上的一根手指或觸控板的手指表示使用者的手勢尚未完成捲動，也就是說，捲動作業尚未結束，這表示貼齊目標尚未變更，表示要先完成使用者手勢才行。

如果貼齊目標未變更，就不會觸發

這是針對貼齊變更的事件，而如果貼齊目標並未改變，即使使用者與捲動器互動，事件也不會觸發。但實際上使用者確實會捲動，因此在捲動完成時，仍會觸發 scrollend 事件。

scrollSnapChanging

在瀏覽器判定捲動手勢已經或將會產生新的貼齊目標時，就會觸發這個事件。會在捲動過程中快速啟動。

scroller.addEventListener('scrollsnapchanging', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchanging = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

該事件會在事件物件上，將貼齊的項目公開為 snapTargetBlock 和 snapTargetInline。如果捲動器只有垂直，snapTargetInline 屬性會是 null。屬性值會是元素節點。

ScrollSnap Change 的專屬詳細資料

在捲動手勢期間及早啟動，且經常啟動

此事件會等待使用者捲動完整手勢，與 scrollSnapChange 不同。當使用者以手指捲動或使用觸控板時，這個事件會主動觸發。假設使用者不需舉起手指就能緩慢捲動，但只要使用者平移到多個可能的貼齊目標，scrollSnapChanging 就會在手勢執行多次觸發。使用者每次捲動畫面時，如果瀏覽器決定在發布新的貼齊目標時就會繼續觸發事件，就會觸發事件來指出元素為何。

未在導入新的貼齊目標的過程中引發所有貼齊目標

此外，請考慮使用快速滑過功能，在使用者執行捲動擲回手勢，同時橫跨多個貼齊目標。這個事件將透過用於休息的目標觸發一次。因此要盡快提供貼齊目標，不會浪費。

用途和範例

這些事件不僅可實現許多新的用途，也使現有模式更容易實作。其中一個主要的例子是啟用由 Spnap 觸發的動畫。如果貼齊目標為貼齊目標，則以情境顯示貼齊項目的子項或相關資訊。

下列模式示範了一些可協助您直接處理效率的應用情境。

強調使用者推薦

這個範例宣傳或視覺化聚焦使用者推薦的見證內容。

scroller.onscrollsnapchange = event => {
  scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
  event.snapTargetInline.classList.add('snapped')
}

顯示貼齊項目的說明文字

這個範例顯示貼齊項目的說明文字。這項示範內容會包含兩項事件，方便您查看 scrollSnapChange 和 scrollSnapChanging 的時間和使用者體驗差異。

為簡報投影片的孩子套用動畫一次

這個範例可知悉新投影片的抵達和休息時間，這是將內容加入動畫的好時機。

document.addEventListener('scrollsnapchange', event => {
  event.snapTargetBlock.classList.add('seen')
})

在捲動器中的 x 和 y 上貼齊

捲動貼齊功能適用於允許水平及垂直捲動的捲動式。這項示範會在您捲動格線時，同時顯示 scrollSnapChanging 和 scrollSnapChange 目標。這部示範影片會清楚說明瀏覽器對齊的元素，不一定是你預期的元素。

兩個已連結的捲動器

此示範有兩個捲動貼齊容器，其中一個容器是概略的連結清單，另一個則是實際頁面內容。新的 scrollSnapChanging 事件可讓您輕鬆連結這些雙向的貼齊狀態，讓兩者都保持同步。

OKLCH 顏色挑選器

此示範有 3 個捲軸，每個捲動器都代表 OKLCH 中的不同色彩通道。已接合的項目會與相關的無線電群組同步處理，然後從納入輸入內容的表單中擷取資料。如果是滑鼠或觸控使用者，您可以捲動至所需值。如果您是鍵盤使用者，請以 Tab 鍵和方向鍵。而螢幕閱讀器則只是一種形式。

閃爍的動畫中心

本示範使用 scrollsnapchange 透過貼齊觸發的轉場效果，逐步改善捲動貼齊體驗。

檢查是否有事件支援使用下列 JavaScript：

if ('onscrollsnapchange' in window) {
  // ok to use snap change
}

可捲動的尺規輸入

這項示範具備可捲動的尺規，做為選擇數字輸入長度的另一種方式。直接在數字輸入選項中輸入值，或捲動至大小。變更事件是用來清除使用者手勢選取的項目，變更事件則用於更新狀態並增強使用者的選擇。

封面流程

此示範內容是以知名 macOS 封面流程的 Bramus Van Damme 出色的捲動式動畫重建為基礎 (也觀看教學影片)。其唯一用途是隱藏相簿名稱，scrollSnapChanging 則用於顯示標題。scrollSnapChange這些活動有助於讓新遊戲沉浸在舊遊戲的迷人之中，並巧妙呈現新遊戲。

更多能激發創意的靈感

現在您可以輕鬆知道哪個元素即將貼齊，以及哪些元素會主動對齊，接著還有許多新的可能性！以下列出幾個有助於激發創造力和其他應用實例的構想：

• 觸發延遲載入，稱為「Snapchange 觸發」轉譯或資料擷取作業。
• 連結至大型圖片的幻燈片縮圖。
• 切換播放/暫停的預告片，以取得貼合的影片縮圖。
• Analytics 追蹤
• 捲動式述說
• Fortune UI/UX 輪廓
• 貼齊目標會顯示錨定工具提示。
• 輕觸即可貼齊
• 貼齊即可顯示
• 扣緊時發出音效
• 滑動 UI
• 滑動分頁或輪轉介面

其他研究

Chrome 團隊很期待看到您透過這些新的 API 建構的功能，也希望這些內容能協助您簡化捲動式介面。

資源：

• CSS 規格
• 捲動 Snap 解說
• CodePen 集合