Peristiwa Snap Scroll

Mulai Chrome 129, Anda dapat menggunakan peristiwa scrollSnapChange dan scrollSnapChanging dari JavaScript. Dengan mengimplementasikan peristiwa snap bawaan, status snap yang sebelumnya tidak terlihat akan menjadi dapat ditindaklanjuti, pada waktu yang tepat, dan selalu benar. Tanpa acara ini, Anda tidak bisa mendapatkannya lagi.

Sebelum scrollSnapChange, Anda dapat menggunakan pengamat persimpangan untuk menemukan elemen apa yang melintasi port scroll, tetapi menentukan elemen yang diikat dibatasi pada beberapa situasi. Misalnya, Anda dapat mendeteksi apakah item snap mengisi port scroll atau mengisi sebagian besar port scroll. Untuk melakukannya, Anda akan mengamati elemen yang berpotongan dari area scroll, lalu berdasarkan item mana yang menggunakan sebagian besar area scroll, asumsikan ini adalah target yang tepat, lalu tunggu scrollend dan ambil tindakan setelah item diikat (target snap).

Namun, sebelum scrollSnapChanging, mengetahui kapan target snap berubah atau perubahannya (seperti diberi scroll fling) tidak mungkin dilakukan.

Kabar baik, acara baru ini membuat informasi ini tersedia dengan cepat dan mudah. Hal ini membuka interaksi snap scroll untuk menjangkau di luar kemampuannya saat ini dan memungkinkan orkestrasi hubungan penautan scroll dan skenario masukan UI yang baru.

scrollSnapChange

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

1. Setelah scroll selesai.
2. Sebelum scrollend.

Peristiwa ini diaktifkan tepat sebelum scrollend, saat scroll selesai, dan hanya jika target snap baru ditempatkan di atasnya. Hal ini membuat acara terasa lambat atau tepat waktu ketika 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 diikat pada objek peristiwa sebagai snapTargetBlock dan snapTargetInline. Jika scroller hanya horizontal, properti snapTargetBlock akan menjadi null. Nilai properti akan menjadi node elemen.

Detail unik untuk scrollSnapChange

Tidak diaktifkan hingga pengguna melepaskan gestur mereka

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 dipicu jika target yang difoto 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 benar-benar men-scroll, jadi 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. Tombol ini terpicu dengan segera, dan selama men-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 diikat pada objek peristiwa sebagai snapTargetBlock dan snapTargetInline. Jika scroller hanya vertikal, properti snapTargetInline akan menjadi null. Nilai properti akan menjadi node elemen.

Detail unik untuk scrollSnapchange

Diaktifkan lebih awal dan sering selama gestur scroll

Tidak seperti scrollSnapChange yang menunggu gestur scroll pengguna lengkap, peristiwa ini akan diaktifkan dengan segera selagi pengguna men-scroll dengan jari atau menggunakan trackpad. Pertimbangkan pengguna yang men-scroll secara perlahan tanpa mengangkat jari, scrollSnapChanging akan terpicu beberapa kali selama gestur selama pengguna menggeser ke beberapa target sasaran yang dapat digeser. 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 menembakkan semua target snap sepanjang perjalanan ke target snap baru

Selain itu, pertimbangkan ayunkan jari, di mana pengguna melakukan gestur scroll thor yang menjangkau beberapa target snap sekaligus; peristiwa ini akan dipicu sekali dengan target yang akan di-istirahatkan. 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 terbaik adalah mengaktifkan animasi yang dipicu snap. Secara kontekstual mengungkapkan item snap, turunan item snap, atau informasi terkait saat item tersebut menjadi target snap.

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

Soroti testimoni

Contoh ini mempromosikan atau memfokuskan secara visual testimoni yang telah diambil.

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

Tampilkan teks untuk item yang diikat

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

Menganimasikan sekali, turunan dari {i>slide<i} presentasi yang diambil

Contoh ini mengetahui kapan {i>slide<i} baru selesai ditempatkan dan diletakkan di atasnya, yang merupakan waktu yang tepat untuk menganimasikan konten sekali saja.

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

Mengepaskan x dan y dalam scroller

Snap scroll berfungsi untuk scroller yang memungkinkan scroll horizontal dan vertikal. Demo ini akan menampilkan target scrollSnapChanging dan scrollSnapChange saat Anda men-scroll petak. Demo ini menjelaskan bagaimana elemen yang dipaskan browser mungkin tidak selalu sesuai dengan yang Anda pikirkan.

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 yang baru memudahkan untuk menautkan status snap ini secara dua arah sehingga selalu sinkron.

Pemilih warna OKLCH

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

Hub animasi yang menarik

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

Periksa dukungan peristiwa dengan JavaScript berikut:

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

Input penggaris yang dapat di-scroll

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

Alur sampul

Demo ini dibuat berdasarkan pembuatan ulang animasi berbasis scroll yang luar biasa dari Bramus Van Damme dari alur sampul macOS yang terkenal (tutorial video juga). Secara unik, scrollSnapChanging digunakan untuk menyembunyikan judul album dan scrollSnapChange digunakan untuk menyajikan judul. Acara ini membantu mengatur penyembunyian judul lama dan presentasi yang baru secara lambat.

Lebih banyak ide untuk menginspirasi kreativitas lainnya

Karena mudah untuk mengetahui elemen mana yang akan diikat dan mana yang secara aktif diikat, ada banyak kemungkinan baru! Berikut adalah daftar ide untuk membantu menginspirasi kreativitas dan kasus penggunaan lainnya:

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

Studi lebih lanjut

Tim Chrome tidak sabar mendengar apa yang Anda buat dengan API baru ini dan berharap API ini dapat membantu menyederhanakan pengalaman yang dapat di-scroll.

Resource:

• Spesifikasi CSS
• Penjelasan Scroll Snap
• Koleksi CodePen