Mulai Chrome 81, Anda tidak perlu lagi menambahkan pemroses peristiwa untuk memaksa resnapping.
Snap Scroll CSS memungkinkan developer web membuat pengalaman scroll yang terkontrol dengan baik dengan mendeklarasikan posisi pengepasan scroll. Salah satu kekurangan dari implementasi saat ini adalah pengepasan scroll tidak berfungsi dengan baik bila tata letak berubah, seperti saat area pandang diubah ukurannya atau perangkat diputar. Kekurangan ini telah diperbaiki di Chrome 81.
Interoperabilitas
Banyak browser memiliki dukungan dasar untuk CSS Scroll Snap. Lihat Bisakah saya menggunakan CSS Scroll Snap? untuk mengetahui informasi selengkapnya.
Saat ini Chrome adalah satu-satunya browser yang menerapkan pengepasan scroll setelah tata letak
perubahan. Firefox memiliki
tiket dibuka untuk
menerapkannya dan Safari juga memiliki
tiket untuk pengepasan ulang setelah
konten scroller berubah. Untuk saat ini, Anda dapat menyimulasikan perilaku
ini dengan menambahkan
kode berikut ke pemroses peristiwa untuk memaksa snap eksekusi:
javascript
scroller.scrollBy(0,0);
Namun, hal ini tidak akan menjamin bahwa scroller akan kembali ke posisi yang sama
.
Latar belakang
Snap Scroll CSS
Fitur Snap Scroll CSS memungkinkan developer web membuat kontrol yang terkontrol dengan baik pengalaman scroll dengan mendeklarasikan posisi pengepasan scroll. Posisi ini memastikan konten yang dapat di-scroll selaras dengan penampungnya untuk mengatasi masalah pengguliran yang tidak akurat. Dengan kata lain, pengepasan scroll:
- Mencegah posisi scroll yang aneh saat men-scroll.
- Menciptakan efek paging melalui konten.
Artikel yang dipaginasi dan korsel gambar adalah dua kasus penggunaan umum untuk scroll pendek.
Kekurangan
Pengepasan gulir memungkinkan pengguna untuk dengan mudah menavigasi konten, namun ketidakmampuan untuk beradaptasi dengan perubahan konten dan tata letak akan menghambat beberapa potensi manfaat lainnya. Seperti yang ditunjukkan dalam 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 tata letak perubahannya adalah:
- Mengubah ukuran jendela
- Memutar perangkat
- Membuka DevTools
Dua skenario pertama membuat CSS Scroll Snap kurang menarik bagi pengguna dan yang ketiga adalah mimpi buruk bagi pengembang saat {i>debugging<i}. Pengembang juga perlu pertimbangkan kekurangan ini saat mencoba membuat pengalaman dinamis yang mendukung tindakan seperti menambahkan, menghapus, atau memindahkan konten.
Perbaikan umum untuk ini adalah dengan menambahkan pemroses yang menjalankan scroll terprogram melalui JavaScript untuk memaksa pengepasan agar dieksekusi setiap kali salah satu tata letak yang disebutkan ini terjadi perubahan. Solusi ini mungkin tidak efektif jika pengguna mengharapkan untuk kembali ke konten yang sama seperti sebelumnya. Penanganan lebih lanjut dengan JavaScript tampaknya hampir mengalahkan tujuan fitur CSS ini.
Dukungan bawaan untuk pengepasan ulang setelah perubahan tata letak di Chrome 81
Kekurangan yang disebutkan tidak lagi ada di Chrome 81: scroller akan tetap ada dipaskan bahkan setelah mengubah tata letak. Mereka akan mengevaluasi ulang posisi scroll setelah mengubah tata letaknya, dan mengatur ulang ke posisi snap terdekat jika diperlukan. Jika scroller sebelumnya dipaskan ke elemen yang masih ada setelah {i>layout<i}, maka {i>scroller<i} akan mencoba untuk kembali ke sana. Perhatikan apa yang terjadi saat tata letak berubah dalam contoh.
Lihat halaman Pengepasan ulang setelah perubahan tata letak spesifikasi untuk mengetahui spesifikasi pendukung.
Contoh: Scrollbar melekat
Dengan “Paskan setelah perubahan tata letak”, developer bisa 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 demo chat demo berikut UI untuk visual.
Pekerjaan di masa depan
Semua efek scroll ulang saat ini instan; tindak lanjut yang potensial adalah untuk mendukung pengepasan ulang dengan scroll yang mulus efek. Lihat masalah spesifikasi untuk mengetahui detailnya.
Masukan
Masukan Anda sangat berharga untuk membuat {i>re-snap<i} menjadi lebih baik setelah perubahan tata letak, jadi lanjutkan lalu mencobanya, dan biarkan para engineer Chromium mengetahui apa yang Anda dipikirkan oleh Anda.