Mulai Chrome 81, Anda tidak perlu lagi menambahkan pemroses peristiwa untuk memaksa snap ulang.
CSS Scroll Snap memungkinkan developer web membuat pengalaman scroll yang terkontrol dengan baik dengan mendeklarasikan posisi snap scroll. Salah satu kekurangan implementasi saat ini adalah snap 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 CSS Scroll Snap. Lihat Dapatkah saya menggunakan CSS Scroll Snap? untuk mengetahui informasi selengkapnya.
Chrome saat ini adalah satu-satunya browser yang menerapkan snap scroll setelah perubahan
tata letak. Firefox memiliki
ticket yang terbuka untuk
menerapkan hal ini dan Safari juga memiliki
ticket yang terbuka untuk mengambil gambar ulang setelah
konten penggeser berubah. Untuk saat ini, Anda dapat menyimulasikan perilaku ini dengan menambahkan
kode berikut ke pemroses peristiwa untuk memaksa snap dijalankan:
javascript
scroller.scrollBy(0,0);
Namun, hal ini tidak akan menjamin bahwa penggeser akan kembali ke elemen
yang sama.
Latar belakang
CSS Scroll Snap
Fitur Scroll Snap CSS memungkinkan developer web membuat pengalaman scroll yang terkontrol dengan mendeklarasikan posisi snap scroll. Posisi ini memastikan bahwa konten yang dapat di-scroll diselaraskan dengan benar dengan penampungnya untuk mengatasi masalah scroll yang tidak akurat. Dengan kata lain, snap scroll:
- Mencegah posisi scroll yang canggung saat men-scroll.
- Membuat efek paging melalui konten.
Artikel yang dipaginasi dan carousel gambar adalah dua kasus penggunaan umum untuk posisi scroll.
Kekurangan
Pengepasan scroll memungkinkan pengguna menavigasi konten dengan mudah, tetapi ketidakmampuannya untuk beradaptasi dengan perubahan konten dan tata letak menghambat beberapa potensi manfaatnya. Seperti ditunjukkan pada contoh di atas, pengguna harus menyesuaikan kembali posisi scroll setiap kali mengubah ukuran jendela untuk menemukan elemen yang sebelumnya diikat. Beberapa skenario umum yang menyebabkan perubahan tata letak adalah:
- Mengubah ukuran jendela
- Memutar perangkat
- Membuka DevTools
Dua skenario pertama membuat CSS Scroll Snap kurang menarik bagi pengguna dan skenario ketiga adalah mimpi buruk bagi developer saat men-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 menambahkan pemroses yang mengeksekusi scroll terprogram melalui JavaScript untuk memaksa snap dieksekusi setiap kali perubahan tata letak yang disebutkan ini terjadi. Solusi ini dapat tidak efektif jika pengguna mengharapkan scrollbar kembali ke konten yang sama seperti sebelumnya. Penanganan lebih lanjut dengan JavaScript tampaknya hampir mengalahkan tujuan fitur CSS ini.
Dukungan bawaan untuk mengambil gambar ulang setelah perubahan tata letak di Chrome 81
Kekurangan yang disebutkan tidak lagi ada di Chrome 81: scroller akan tetap tertekan bahkan setelah mengubah tata letak. Alat tersebut akan mengevaluasi kembali posisi scroll setelah mengubah tata letak, dan menyesuaikan ulang ke posisi snap terdekat jika diperlukan. Jika scroller sebelumnya telah dipaskan ke elemen yang masih ada setelah perubahan tata letak, scroller akan mencoba kembali ke elemen tersebut. Perhatikan hal yang terjadi saat tata letak berubah dalam contoh berikut.
NOPE dan mengubah orientasi perangkat
dari potret ke lanskap, layar kosong akan ditampilkan, yang menunjukkan bahwa
posisi snap scroll hilang.
NOPE tetap terlihat meskipun orientasi perangkat berubah beberapa kali.
Lihat Spesifikasi snap ulang setelah perubahan tata letak untuk detail selengkapnya.
Contoh: Scrollbar melekat
Dengan "Snap after layout changes", 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 ulang saat ini instan; tindak lanjut yang potensial adalah mendukung perekaman ulang dengan efek scroll yang lancar. Lihat masalah spesifikasi untuk mengetahui detailnya.
Masukan
Masukan Anda sangat berharga untuk membuat snap ulang setelah perubahan tata letak menjadi lebih baik, jadi lanjutkan dan cobalah dan beri tahu engineer Chrome mengetahui apa yang Anda pikirkan.