感謝觀看 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。屬性的值會是元素節點。

scrollSnapChanging 的專屬詳細資料

在捲動手勢期間提早且頻繁觸發

與 scrollSnapChange 等待使用者完成捲動手勢不同，這個事件會在使用者用手指或觸控板捲動時立即觸發。舉例來說，如果使用者在滑動時不抬起手指，只要使用者在滑動時經過多個可能的貼齊目標，scrollSnapChanging 就會在手勢期間觸發多次。每當使用者捲動畫面時，如果瀏覽器判斷畫面在釋放時會停留在新的對齊目標上，就會觸發事件，告知您該元素為何。

不會在前往新固定目標的過程中觸發所有固定目標

此外，請考慮飛移動作，當使用者執行捲動拋擲手勢，同時跨越多個對齊目標時，系統會針對要停留的目標觸發一次這項事件。因此，系統會盡快提供快照目標，但不會浪費資源。

用途和範例

這些事件可支援許多新用途，同時也能讓目前的模式更容易實作。其中一個主要範例是啟用快照觸發動畫。在連結目標為連結項目時，根據內容顯示連結項目、連結項目的子項或相關資訊。

以下模式說明瞭一些用途，協助您立即提高工作效率。

醒目顯示客戶評價

這個範例會宣傳或視覺化聚焦於擷取的客戶見證。

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 建構的內容，並希望這有助於簡化捲動體驗。