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.
Scroller horizontal ditampilkan dengan kotak bernomor di dalamnya sebagai target snap. Di sebelah kiri adalah log real time peristiwa scrollSnapChange, yang menyoroti snapTargetInline dengan warna biru. Di sebelah kanan adalah log real time dari peristiwa scrollSnap eksternal, yang menyoroti snapTargetInline dengan warna abu-abu.
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
- Setelah scroll selesai.
- 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
.
Snap Mengubah
https://codepen.io/web-dot-dev/pen/wvLPPBL
Snap Perubahan
https://codepen.io/web-dot-dev/pen/QWXOObw
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.
Grid persegi dalam scroller horizontal dan vertikal ditampilkan. Batas putus-putus merepresentasikan target scrollSnapchange dan batas yang solid adalah target scrollSnapChange. Merah mewakili snapTargetInline, dan biru mewakili snapTargetBlock.
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.
scrollSnapChanges digunakan untuk menyinkronkan item yang diikat dengan status dengan segera, sedangkan scrollSnapChange digunakan untuk menganimasikan header saluran warna yang terpengaruh tempat input pengguna diterapkan.
https://codepen.io/web-dot-dev/pen/OJeOOVGHub 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.