Mulai Chrome 81, Anda tidak perlu lagi menambahkan pemroses peristiwa untuk memaksa resnapping.
CSS Scroll Snap memungkinkan developer web membuat pengalaman scroll yang terkontrol secara baik dengan mendeklarasikan posisi snap scroll. Salah satu kekurangan dari implementasi saat ini adalah pengepasan scroll tidak berfungsi dengan baik saat tata letak berubah, seperti saat ukuran area pandang diubah atau perangkat diputar. Kekurangan ini telah diperbaiki di Chrome 81.
Interoperabilitas
Banyak browser memiliki dukungan dasar untuk Scroll Snap CSS. Lihat Dapatkah saya menggunakan Scroll Snap CSS? untuk informasi selengkapnya.
Chrome saat ini adalah satu-satunya browser yang menerapkan pengepasan scroll setelah tata letak
berubah. Firefox memiliki tiket yang terbuka untuk menerapkan ini dan Safari juga memiliki tiket terbuka untuk melakukan snap ulang setelah konten scroller berubah. Untuk saat ini, Anda dapat menyimulasikan perilaku ini dengan menambahkan
kode berikut ke pemroses peristiwa untuk memaksa snapping agar dieksekusi:
javascript
scroller.scrollBy(0,0);
Namun, hal ini tidak akan menjamin bahwa scroller akan kembali ke elemen
yang sama.
Latar belakang
Snap Scroll CSS
Fitur Snap Scroll CSS memungkinkan developer web membuat pengalaman scroll yang terkontrol dengan baik dengan mendeklarasikan posisi snap scroll. Posisi ini memastikan bahwa konten yang dapat di-scroll disejajarkan dengan benar dengan penampungnya untuk mengatasi masalah scroll yang tidak akurat. Dengan kata lain, pengepasan scroll:
- Mencegah posisi scroll yang tidak nyaman saat men-scroll.
- Menciptakan efek paging melalui konten.
Artikel dan carousel gambar yang dipaginasi adalah dua kasus penggunaan umum untuk snapshot scroll.
Kekurangan
Pengepasan scroll memungkinkan pengguna menjelajahi konten dengan mudah, tetapi ketidakmampuannya untuk beradaptasi dengan perubahan konten dan tata letak akan memblokir beberapa potensi manfaatnya. Seperti yang ditunjukkan pada contoh di atas, pengguna harus menyesuaikan ulang posisi scroll setiap kali mengubah ukuran jendela untuk menemukan elemen yang telah diikat sebelumnya. Beberapa skenario umum yang menyebabkan perubahan tata letak adalah:
- Mengubah ukuran jendela
- Memutar perangkat
- Membuka DevTools
Dua skenario pertama membuat Snap Scroll CSS kurang menarik bagi pengguna dan yang ketiga adalah mimpi buruk bagi developer saat melakukan debug. Developer juga perlu mempertimbangkan kekurangan ini saat mencoba membuat pengalaman dinamis yang mendukung tindakan seperti menambahkan, menghapus, atau memindahkan konten.
Perbaikan umum untuk hal ini adalah dengan menambahkan pemroses yang mengeksekusi scroll terprogram melalui JavaScript untuk memaksa snap agar dieksekusi setiap kali perubahan tata letak yang disebutkan ini terjadi. Solusi ini mungkin tidak efektif jika pengguna mengharapkan scroller kembali ke konten yang sama seperti sebelumnya. Penanganan lebih lanjut dengan JavaScript tampaknya hampir membatalkan tujuan fitur CSS ini.
Dukungan bawaan untuk snap ulang setelah perubahan tata letak di Chrome 81
Kekurangan yang disebutkan tidak lagi ada di Chrome 81: scroller akan tetap terikat bahkan setelah mengubah tata letak. Mereka akan mengevaluasi ulang posisi scroll setelah mengubah tata letak, dan melakukan snap ulang ke posisi snap terdekat jika diperlukan. Jika scroller sebelumnya diikat ke elemen yang masih ada setelah perubahan tata letak, scroller akan mencoba kembali ke elemen tersebut. Perhatikan apa yang terjadi saat tata letak berubah dalam contoh berikut.
NOPE dan mengubah orientasi perangkat
dari potret menjadi lanskap, layar kosong akan ditampilkan, yang menunjukkan bahwa
posisi snap scroll hilang.
NOPE tetap terlihat meskipun orientasi perangkat berubah beberapa kali.
Lihat spesifikasi ulang setelah perubahan tata letak untuk detail selengkapnya.
Contoh: Scrollbar melekat
Dengan "Snap setelah perubahan tata letak", developer dapat menerapkan scrollbar melekat dengan beberapa baris CSS:
.container {
scroll-snap-type: y proximity;
}
.container::after {
scroll-snap-align: end;
display: block;
}
Ingin mempelajari lebih lanjut? Lihat UI chat demo berikut untuk visual.
Pekerjaan mendatang
Semua efek scroll snap ulang saat ini bersifat instan; kemungkinan tindak lanjutnya adalah mendukung snapshot ulang dengan efek scroll halus. Lihat masalah spesifikasi untuk mengetahui detailnya.
Masukan
Masukan Anda sangat berharga dalam membuat proses snap ulang setelah perubahan tata letak menjadi lebih baik, jadi lanjutkan dan cobalah dan beri tahu engineer Chromium pendapat Anda.