Peristiwa Snap Scroll

Adam Argyle
Adam Argyle
X GitHub

Mulai Chrome 129, Anda dapat menggunakan peristiwa scrollSnapChange dan scrollSnapChanging dari JavaScript. Dengan menerapkan peristiwa snap bawaan, status snap yang sebelumnya tidak terlihat akan menjadi dapat ditindaklanjuti, pada waktu yang tepat, dan selalu benar. Anda tidak akan mendapatkan kemudahan ini tanpa peristiwa tersebut.

Dukungan Browser

  • Chrome: 129.
  • Edge: 129.
  • Firefox: tidak didukung.
  • Safari: tidak didukung.

Sumber

Dukungan Browser

  • Chrome: 129.
  • Edge: 129.
  • Firefox: tidak didukung.
  • Safari: tidak didukung.

Sumber

Sebelum scrollSnapChange, Anda dapat menggunakan intersection observer untuk menemukan elemen yang melintasi port scroll, tetapi menentukan apa yang diambil dibatasi untuk beberapa situasi. Misalnya, Anda dapat mendeteksi apakah item snap mengisi port scroll atau mengisi sebagian besar port scroll. Untuk melakukannya, Anda harus mengamati elemen yang berpotongan dari area scroll, lalu berdasarkan item yang menggunakan sebagian besar area scroll, asumsikan ini adalah target snap, lalu tunggu scrollend dan lakukan tindakan pada item yang di-snap (target snap).

Namun, sebelum scrollSnapChanging, mengetahui kapan target snap berubah atau apa yang diubah (seperti diberikan scroll fling) tidak mungkin.

Scroller horizontal ditampilkan dengan kotak bernomor di dalamnya sebagai target snap. Di sebelah kiri adalah log real-time peristiwa scrollSnapChange, yang menandai snapTargetInline dengan warna biru. Di sebelah kanan adalah log real-time peristiwa scrollSnapChanging, yang menandai snapTargetInline dengan warna abu-abu.

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

Kabar baik, acara baru ini membuat informasi ini tersedia dengan cepat dan mudah. Hal ini memungkinkan interaksi snap scroll untuk melampaui kemampuannya saat ini dan memungkinkan pengaturan hubungan snap scroll serta skenario masukan UI baru.

scrollSnapChange

Peristiwa ini hanya diaktifkan jika gestur scroll telah menghasilkan target snap baru yang telah diistirahatkan, dan dalam urutan berikut

  1. Setelah scroll berhenti.
  2. Sebelum scrollend.

Peristiwa ini diaktifkan tepat sebelum scrollend, saat scroll selesai, dan hanya jika target snap baru ditempatkan di atasnya. Hal ini membuat peristiwa terasa lambat atau tepat waktu saat gestur scroll selesai.

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

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

Peristiwa ini mengekspos item yang diambil pada objek peristiwa sebagai snapTargetBlock dan snapTargetInline. Jika penggeser hanya horizontal, properti snapTargetBlock akan menjadi null. Nilai properti akan menjadi node elemen.

Detail unik untuk scrollSnapChange

Tidak diaktifkan hingga pengguna melepaskan gesturnya

Jari yang masih ada di layar atau jari di trackpad menunjukkan gestur pengguna belum selesai di-scroll, yang berarti scroll belum berakhir, yang berarti target snap belum berubah, yang menunggu gestur pengguna selesai.

Tidak diaktifkan jika target snap tidak berubah

Peristiwa ini ditujukan untuk perubahan snap, dan jika target snap tidak berubah, peristiwa tidak akan diaktifkan, meskipun scroller berinteraksi dengan pengguna. Namun, pengguna memang men-scroll, sehingga setelah scroll selesai, peristiwa scrollend masih diaktifkan.

scrollSnapChanging

Peristiwa ini diaktifkan segera setelah browser memutuskan bahwa gestur scroll telah atau akan menghasilkan target snap baru. Peristiwa ini diaktifkan dengan cepat, dan selama scroll.

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

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

Peristiwa ini mengekspos item yang diambil pada objek peristiwa sebagai snapTargetBlock dan snapTargetInline. Jika penggeser hanya vertikal, properti snapTargetInline akan menjadi null. Nilai properti akan menjadi node elemen.

Detail unik untuk scrollSnapChanging

Diaktifkan lebih awal dan sering selama gestur scroll

Tidak seperti scrollSnapChange yang menunggu gestur scroll pengguna selesai, peristiwa ini akan segera diaktifkan saat pengguna men-scroll dengan jari atau menggunakan trackpad. Pertimbangkan pengguna yang men-scroll perlahan tanpa mengangkat jari, scrollSnapChanging akan diaktifkan beberapa kali selama gestur selama pengguna menggeser beberapa target snap potensial. Setiap kali pengguna men-scroll, jika browser telah menetapkan bahwa setelah rilis akan beristirahat pada target snap baru, peristiwa akan terpicu untuk memberi tahu Anda elemen mana yang dimaksud.

Tidak memicu semua target snap di sepanjang jalan ke target snap baru

Selain itu, pertimbangkan fling, saat pengguna melakukan gestur lemparan scroll yang mencakup beberapa target snap sekaligus; peristiwa ini akan diaktifkan sekali dengan target yang akan diistirahatkan. Jadi sangat bersemangat tetapi tidak boros, memberi Anda target snap sesegera mungkin.

Kasus penggunaan dan contoh

Peristiwa ini memungkinkan banyak kasus penggunaan baru sekaligus membuat pola saat ini jauh lebih mudah diterapkan. Salah satu contoh utamanya adalah mengaktifkan animasi yang dipicu snap. Secara kontekstual menampilkan item snap, turunan item snap, atau informasi terkait jika item tersebut adalah target snap.

Pola berikut menunjukkan beberapa kasus penggunaan untuk membantu Anda langsung produktif.

Menandai testimoni

Contoh ini mempromosikan atau memfokuskan testimonial yang diambil secara visual.

scroller.onscrollsnapchange = event => {
  scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
  event.snapTargetInline.classList.add('snapped')
}
https://codepen.io/web-dot-dev/pen/dyBZZPe

Tampilkan teks untuk item yang diikat

Contoh ini menampilkan teks untuk item yang diambil. Kedua peristiwa disertakan dalam demo ini, sehingga Anda dapat melihat perbedaan waktu dan pengalaman pengguna antara scrollSnapChange dan scrollSnapChanging.

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

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

Menganimasikan sekali, turunan slide presentasi yang diambil

Contoh ini mengetahui kapan slide baru telah di-land dan di-rest, yang merupakan waktu yang tepat untuk menganimasikan konten sekali.

document.addEventListener('scrollsnapchange', event => {
  event.snapTargetBlock.classList.add('seen')
})
https://codepen.io/web-dot-dev/pen/rNEYYVj

Mengepaskan x dan y dalam scroller

Snap scroll berfungsi untuk penggeser yang memungkinkan scroll horizontal dan vertikal. Demo ini menampilkan target scrollSnapChanging dan scrollSnapChange saat Anda men-scroll petak. Demo ini menjelaskan bahwa elemen yang di-snap oleh browser mungkin tidak selalu seperti yang Anda harapkan.

Petak persegi dalam penggeser horizontal dan vertikal ditampilkan. Batas putus-putus mewakili target scrollSnapChanging dan batas solid adalah target scrollSnapChange. Merah mewakili snapTargetInline, dan biru mewakili snapTargetBlock.

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

Dua scroller tertaut

Demo ini memiliki dua wadah pengepul scroll yang salah satunya adalah daftar link tingkat tinggi dan yang lainnya adalah konten halaman yang sebenarnya. Peristiwa scrollSnapChanging baru memudahkan penautan status snap secara dua arah sehingga selalu sinkron.

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

Pemilih warna OKLCH

Demo ini memiliki 3 penggeser, masing-masing mewakili saluran warna yang berbeda dalam OKLCH. Item yang diambil disinkronkan dengan grup pilihan yang relevan dan data dapat diambil dari formulir yang menggabungkan input. Untuk pengguna mouse atau sentuh, Anda dapat men-scroll ke nilai yang diinginkan. Untuk pengguna keyboard, Anda dapat menggunakan tombol tab dan tombol panah. Untuk pembaca layar, ini hanyalah sebuah formulir.

scrollSnapChanging digunakan untuk segera menyinkronkan item yang diambil dengan status, sedangkan scrollSnapChange digunakan untuk menganimasikan header saluran warna yang terpengaruh tempat input pengguna diterapkan.

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

Hub animasi yang menarik

Demo ini secara bertahap meningkatkan pengalaman snap scroll dengan transisi yang dipicu snap menggunakan scrollsnapchange.

Periksa dukungan peristiwa dengan JavaScript berikut:

if ('onscrollsnapchange' in window) {
  // ok to use snap change
}
https://codepen.io/web-dot-dev/pen/MWMOOae

Input penggaris yang dapat di-scroll

Demo ini menampilkan penggaris yang dapat di-scroll sebagai cara alternatif untuk memilih panjang untuk input angka. Masukkan nilai langsung ke input angka atau scroll ke ukuran. Peristiwa perubahan digunakan untuk menghapus pilihan selama gestur pengguna, sedangkan peristiwa perubahan digunakan untuk memperbarui status dan memperkuat pilihan pengguna.

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

Alur penutup

Demo ini dibuat berdasarkan reka ulang animasi yang sangat baik dari Bramus Van Damme yang didorong scroll dari alur sampul macOS yang terkenal (juga tutorial video). Secara unik, scrollSnapChanging digunakan untuk menyembunyikan judul album dan scrollSnapChange digunakan untuk menampilkan judul. Peristiwa ini membantu mengatur penyembunyian judul lama dengan cepat dan menampilkan judul baru dengan lambat.

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

Ide lainnya untuk menginspirasi kreativitas

Setelah mengetahui elemen mana yang akan diambil dan mana yang aktif diambil, ada banyak kemungkinan baru. Berikut adalah daftar ide untuk membantu menginspirasi kreativitas dan kasus penggunaan tambahan:

  • Memicu pemuatan lambat, yang dikenal sebagai rendering yang dipicu snapchange atau pengambilan data.
  • Thumbnail strip film yang ditautkan ke gambar yang lebih besar.
  • Mengalihkan putar/jeda untuk cuplikan video untuk thumbnail video yang diambil.
  • Pelacakan Analytics
  • Scrollytelling
  • UI/UX Wheel of Fortune
  • Target snap akan mendapatkan tooltip anchor.
  • Ketuk untuk mengambil gambar
  • Paskan untuk membuka
  • Suara saat snap
  • UI Geser
  • Tab atau carousel yang dapat digeser

Studi lebih lanjut

Tim Chrome ingin mendengar apa yang Anda buat dengan API baru ini dan berharap API ini dapat membantu menyederhanakan pengalaman scroll Anda.

Resource: