在 Chrome 129 中,您可以使用 JavaScript 的 scrollSnapChange
和 scrollSnapChanging
事件。透過實作內建的貼齊事件,先前看不見的快照狀態將可以在適當時機變成可行的,並且永遠正確。刪除這些事件並不方便。
在 scrollSnapChange
之前,您可以使用交集觀察器找出哪些元素跨越捲動通訊埠,但判斷哪些元素僅限於少數情況。舉例來說,您可以偵測貼齊項目是否填滿捲動通訊埠,或是填滿大多數捲動通訊埠。如要這麼做,您需要觀察捲動區域的交集元素,再根據佔用大部分捲動區域的項目,假設這是貼齊目標,然後等待 scrollend
並在已貼齊的項目 (貼齊目標) 時採取行動。
然而,在 scrollSnapChanging
之前,無法得知貼齊目標何時變更,或是貼齊目標的變更 (例如捲動快速滑過的情況)。
水平捲軸顯示,作為貼齊目標的編號方塊。左側是 ScrollSnapChange 事件的即時記錄,其中以藍色醒目顯示 sSnapTargetInline。右側是 ScrollSnapChanged 事件的即時記錄,其中以灰色醒目顯示 sSnapTargetInline。
好消息!這些新活動可讓您輕鬆快速地取得相關資訊。如此一來,捲動貼齊互動就能超越其現有功能,並可以協調捲動貼齊關係和最新 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')
}
顯示貼齊項目的說明文字
這個範例顯示貼齊項目的說明文字。這項示範內容會包含兩項事件,方便您查看 scrollSnapChange
和 scrollSnapChanging
的時間和使用者體驗差異。
為簡報投影片的孩子套用動畫一次
這個範例可知悉新投影片的抵達和休息時間,這是將內容加入動畫的好時機。
document.addEventListener('scrollsnapchange', event => {
event.snapTargetBlock.classList.add('seen')
})
在捲動器中的 x 和 y 上貼齊
捲動貼齊功能適用於允許水平及垂直捲動的捲動式。這項示範會在您捲動格線時,同時顯示 scrollSnapChanging
和 scrollSnapChange
目標。這部示範影片會清楚說明瀏覽器對齊的元素,不一定是你預期的元素。
顯示水平和垂直捲軸中的正方形格線。虛線邊框代表 ScrollSnapChange 目標,而實心邊框則是 ScrollSnapChange 目標。紅色代表 SnapTargetInline,而藍色代表 SnapTargetBlock。
兩個已連結的捲動器
此示範有兩個捲動貼齊容器,其中一個容器是概略的連結清單,另一個則是實際頁面內容。新的 scrollSnapChanging
事件可讓您輕鬆連結這些雙向的貼齊狀態,讓兩者都保持同步。
OKLCH 顏色挑選器
此示範有 3 個捲軸,每個捲動器都代表 OKLCH 中的不同色彩通道。已接合的項目會與相關的無線電群組同步處理,然後從納入輸入內容的表單中擷取資料。如果是滑鼠或觸控使用者,您可以捲動至所需值。如果您是鍵盤使用者,請以 Tab 鍵和方向鍵。而螢幕閱讀器則只是一種形式。
ScrollSnapChange 是用於快速同步處理已貼合的項目與狀態,ScrollSnapChange 則用於動畫,呈現使用者輸入內容所套用的受影響色彩頻道標題。
https://codepen.io/web-dot-dev/pen/OJeOOVG閃爍的動畫中心
本示範使用 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 建構的功能,也希望這些內容能協助您簡化捲動式介面。