感謝觀看 Google I/O 大會！立即觀賞隨選內容。

本頁面由 Cloud Translation API 翻譯而成。

捲動貼齊事件

Adam Argyle

在 Chrome 129 中，您可以使用 JavaScript 的 scrollSnapChange 和 scrollSnapChanging 事件。實作內建的快照事件後，先前看不見的快照狀態就會在適當時間變得可供操作，且一律正確。這並非您在沒有這些事件的情況下所享有的便利性。

瀏覽器支援

資料來源

瀏覽器支援

資料來源

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

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

畫面上會顯示水平捲軸，其中包含編號方塊，可做為貼齊目標。畫面左側是 scrollSnapChange 事件的即時記錄，其中以藍色標示 snapTargetInline。右側是 scrollSnapChanging 事件的即時記錄，其中以灰色標示 snapTargetInline。

試試看
https://codepen.io/web-dot-dev/pen/jOjaaEP

好消息是，這些新事件可讓您快速輕鬆取得這項資訊。這項功能可讓捲動貼齊互動超越目前的功能，並協調捲動貼齊關係和全新 UI 回饋情境。

scrollSnapChange

只有在捲動手勢導致新的對齊目標已停留時，系統才會觸發此事件，且按照以下順序觸發

捲動畫面後。
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')
}

https://codepen.io/web-dot-dev/pen/dyBZZPe

顯示已固定項目的標題

這個範例會顯示已固定項目的標題。這次示範會同時顯示這兩個事件，讓您瞭解 scrollSnapChange 和 scrollSnapChanging 之間的時間和使用者體驗差異。

Snap 變更
https://codepen.io/web-dot-dev/pen/wvLPPBL

Snap 變更
https://codepen.io/web-dot-dev/pen/QWXOObw

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

這個範例會在使用者停留在新的投影片時，顯示動畫內容。

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

https://codepen.io/web-dot-dev/pen/rNEYYVj

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

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

畫面上會顯示水平和垂直捲軸中的方格格狀檢視畫面。虛線邊框代表 scrollSnapChanging 目標，實線邊框則代表 scrollSnapChange 目標。紅色代表 snapTargetInline，藍色代表 snapTargetBlock。

https://codepen.io/web-dot-dev/pen/qBzVVdp

兩個連結的捲軸

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

https://codepen.io/web-dot-dev/pen/YzoEEXj

OKLCH 顏色挑選器

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

scrollSnapChanging 用於立即同步已固定項目與狀態，而 scrollSnapChange 則用於為已套用使用者輸入內容的受影響色彩通道標頭製作動畫。

https://codepen.io/web-dot-dev/pen/OJeOOVG

對齊動畫樞紐

這個示範會使用 scrollsnapchange 逐步改善捲動自動對齊體驗，並使用自動對齊觸發的轉場效果。

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

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

https://codepen.io/web-dot-dev/pen/MWMOOae

可捲動的尺規輸入

這個示範以可捲動的標尺做為選取數字輸入長度的替代方法。直接在數字輸入框中輸入值，或捲動至所需大小。變更事件用於在使用者手勢期間清除選取項目，而變更事件則用於更新狀態並強化使用者的選擇。

https://codepen.io/web-dot-dev/pen/LYKOOpd

封面流

這個示範是根據 Bramus Van Damme 重現 macOS 封面流的優異捲動動畫 (影片教學課程) 所建構。scrollSnapChanging 用於隱藏專輯標題，scrollSnapChange 則用於顯示標題。這些事件有助於協調舊標題的急迫隱藏作業，以及新標題的延遲顯示作業。

https://codepen.io/web-dot-dev/pen/Bagmmog

其他研究

Chrome 團隊很期待聽到你使用這些新 API 建構的內容，並希望這有助於簡化捲動體驗。