Scroll snap setelah perubahan tata letak

Mulai Chrome 81, Anda tidak perlu lagi menambahkan pemroses peristiwa untuk memaksa resnapping.

Adam Argyle
Kaan Alsan
Kaan Alsan
Yi Gu

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.

Contoh snap scroll CSS.
Contoh snap scroll CSS. Pada akhirnya, menggulir ke tengah horizontal gambar sejajar dengan bagian tengah horizontal dari container scroll.

Kekurangan

Posisi snap akan hilang saat mengubah ukuran jendela.

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.

Posisi snap hilang
Memutar perangkat tidak mempertahankan posisi snap di Chrome 80. Setelah men-scroll ke slide yang bertuliskan NOPE dan mengubah orientasi perangkat dari potret ke lanskap, layar kosong ditampilkan, yang menunjukkan bahwa posisi penunjuk scroll hilang.
Posisi snap dipertahankan
Memutar perangkat juga akan mempertahankan posisi snap di Chrome 81. Slide yang mengatakan NOPE tetap terlihat meskipun orientasi perangkat berubah beberapa kali.

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.

Menambahkan pesan baru akan memicu snap ulang yang membuatnya menempel pada bagian bawah Chrome 81.

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.