Scrolling yang terkontrol dengan baik dengan CSS Scroll Snap

Buat pengalaman scroll yang terkontrol dengan mendeklarasikan posisi snap scroll.

Robert Flack

Majid Valipour

Fitur CSS Scroll Snap memungkinkan developer web membuat pengalaman scroll yang terkontrol dengan baik dengan mendeklarasikan posisi snap scroll. Artikel yang di-pagination dan carousel gambar adalah dua contoh yang umum digunakan. CSS Scroll Snap menyediakan API yang mudah digunakan dan konsisten untuk mem-build pola UX populer ini.

Latar belakang

Kasus untuk snap scroll

Men-scroll adalah cara populer dan alami untuk berinteraksi dengan konten di web. Ini adalah cara native platform untuk memberikan akses ke lebih banyak informasi daripada yang terlihat di layar sekaligus, yang menjadi sangat penting di platform seluler dengan ruang layar terbatas. Jadi, tidak mengherankan jika penulis web semakin memilih untuk mengatur konten ke dalam daftar datar yang dapat di-scroll, bukan hierarki yang dalam.

Kelemahan utama scroll adalah kurangnya presisi. Scroll jarang kali disejajarkan dengan paragraf atau kalimat. Hal ini bahkan lebih terlihat untuk konten bernomor halaman atau item dengan batas yang bermakna saat scroll selesai di tengah halaman atau gambar, sehingga sebagian konten terlihat. Kasus penggunaan ini mendapatkan manfaat dari pengalaman scroll yang dikontrol dengan baik.

Developer web telah lama mengandalkan solusi berbasis JavaScript untuk mengontrol scroll guna membantu mengatasi kekurangan ini. Namun, solusi berbasis JavaScript gagal memberikan solusi fidelitas penuh karena kurangnya primitif penyesuaian scroll atau akses ke scroll gabungan. CSS Scroll Snap memastikan solusi yang cepat, fidelitas tinggi, dan mudah digunakan yang berfungsi secara konsisten di seluruh browser.

CSS Scroll Snap memungkinkan penulis web menandai setiap penampung scroll dengan batas untuk operasi scroll yang akan diselesaikan. Browser kemudian memilih posisi akhir yang paling sesuai, bergantung pada detail operasi scroll, tata letak dan visibilitas penampung scroll, serta detail posisi snap, lalu menganimasikannya dengan lancar. Kembali ke contoh sebelumnya, saat pengguna selesai men-scroll carousel, gambar yang terlihat akan langsung muncul. Tidak ada penyesuaian scroll yang diperlukan oleh JavaScript.

CSS Scroll Snap

Snap scroll adalah tindakan menyesuaikan offset scroll penampung scroll agar berada di posisi snap yang diinginkan setelah operasi scroll selesai.

Penampung scroll dapat memilih untuk menggunakan snap scroll menggunakan properti scroll-snap-type. Tindakan ini memberi tahu browser bahwa browser harus mempertimbangkan untuk menyetel penampung scroll ini ke posisi snap yang dihasilkan oleh turunannya. scroll-snap-type menentukan sumbu tempat scroll terjadi: x, y, atau both, dan ketatannya snap: mandatory, proximity. Selengkapnya akan dibahas nanti.

Posisi snap dapat dihasilkan dengan mendeklarasikan perataan yang diinginkan pada elemen. Posisi ini adalah offset scroll tempat penampung scroll ancestor terdekat dan elemen disejajarkan seperti yang ditentukan untuk sumbu yang diberikan. Penyelarasan berikut dapat dilakukan pada setiap sumbu: start, end, center.

Penyelarasan start berarti tepi awal snapport penampung scroll harus dihapus dengan tepi awal area snap elemen. Demikian pula, perataan end dan center berarti bahwa tepi akhir atau tengah snapport penampung scroll harus dihapus dengan tepi akhir atau tengah area snap elemen.

Contoh berikut mengilustrasikan cara menggunakan konsep ini.

Contoh: Galeri horizontal

Kasus penggunaan umum untuk snap scroll adalah carousel gambar. Misalnya, untuk membuat carousel gambar horizontal yang terkunci ke setiap gambar saat Anda men-scroll, kita dapat menentukan penampung scroll agar memiliki scroll-snap-type wajib pada sumbu horizontal. tetapkan setiap gambar ke scroll-snap-align: center untuk memastikan bahwa snapping memusatkan gambar dalam carousel.

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

<div id="gallery">
  <img src="cat.jpg">
  <img src="dog.jpg">
  <img src="another_cute_animal.jpg">
</div>

Karena posisi snap dikaitkan dengan elemen, algoritma snap dapat menentukan kapan dan bagaimana snap dilakukan dengan mempertimbangkan elemen dan ukuran penampung scroll. Misalnya, pertimbangkan kasus saat satu gambar lebih besar dari carousel. Algoritma snap sederhana dapat mencegah pengguna menggeser untuk melihat gambar lengkap. Namun, spesifikasi memerlukan implementasi untuk mendeteksi kasus ini dan memungkinkan pengguna men-scroll secara bebas dalam gambar tersebut hanya dengan menggeser di tepinya.

Contoh: halaman produk yang telah dilalui

Kasus umum lainnya yang dapat memanfaatkan snap scroll adalah halaman dengan beberapa bagian logis untuk di-scroll secara vertikal, misalnya, halaman produk standar. scroll-snap-type: y proximity; lebih cocok untuk kasus seperti ini. Hal ini tidak mengganggu saat pengguna men-scroll ke tengah bagian tertentu, tetapi juga menarik dan mengarahkan perhatian ke bagian baru saat mereka men-scroll cukup dekat.

Berikut cara melakukannya:

article {
  scroll-snap-type: y proximity;
  /* Reserve space for header plus some extra space for sneak peeking. */
  scroll-padding-top: 15vh;
  overflow-y: scroll;
}
section {
  /* Snap align start. */
  scroll-snap-align: start;
}
header {
  position: fixed;
  height: 10vh;
}

<article>
  <header> Header </header>
  <section> Section One </section>
  <section> Section Two </section>
  <section> Section Three </section>
</article>

Padding dan margin scroll

Halaman produk memiliki header atas posisi tetap. Desain ini juga meminta beberapa bagian atas untuk tetap terlihat saat penampung scroll di-snap untuk memberikan isyarat desain kepada pengguna tentang konten di atas.

Properti scroll-padding adalah properti css baru yang dapat digunakan untuk menyesuaikan wilayah yang dapat dilihat secara efektif dari penampung scroll, atau snapport, yang digunakan saat menghitung perataan snap scroll. Properti ini menentukan inset terhadap kotak padding penampung scroll. Dalam contoh kami, inset tambahan 15vh ditambahkan ke bagian atas, yang menginstruksikan browser untuk mempertimbangkan posisi yang lebih rendah, 15vh di bawah tepi atas penampung scroll, sebagai tepi awal vertikalnya untuk snap scroll. Saat snap, tepi awal elemen target snap akan dihapus dengan posisi baru ini, sehingga menyisakan ruang di atasnya.

Properti scroll-margin menentukan jumlah awal yang digunakan untuk menyesuaikan kotak efektif target snap yang mirip dengan cara scroll-padding berfungsi pada penampung scroll snap.

Anda mungkin telah memperhatikan bahwa kedua properti ini tidak berisi kata "snap". Hal ini disengaja karena sebenarnya mereka mengubah kotak untuk semua operasi scroll yang relevan dan bukan hanya snap scroll. Misalnya, Chrome memperhitungkannya saat menghitung ukuran halaman untuk operasi scroll paging seperti PageDown dan PageUp, dan juga saat menghitung jumlah scroll untuk operasi Element.scrollIntoView().

Interaksi dengan API scroll lainnya

DOM Scrolling API

Snap scroll terjadi setelah semua operasi scroll, termasuk yang dimulai oleh skrip. Saat Anda menggunakan API seperti Element.scrollTo, browser akan menghitung posisi scroll yang diinginkan dari operasi, lalu menerapkan logika snap yang sesuai untuk menemukan lokasi snap akhir. Dengan demikian, skrip pengguna tidak perlu melakukan penghitungan manual untuk snap.

Scroll lancar

Scroll halus mengontrol perilaku operasi scroll terprogram, sedangkan snap scroll menentukan tujuannya. Karena mengontrol aspek ortogonal scroll, keduanya dapat digunakan bersama dan saling melengkapi.

Perilaku overscroll

API perilaku overscroll mengontrol cara scroll dirantai di beberapa elemen dan tidak terpengaruh oleh snap scroll.

Perhatian dan praktik terbaik

Hindari penggunaan snap wajib jika elemen target memiliki jarak yang lebar. Hal ini dapat menyebabkan konten di antara posisi snap menjadi tidak dapat diakses.

Dalam banyak kasus, snap scroll dapat ditambahkan sebagai peningkatan tanpa perlu mendeteksi fitur. Jika diperlukan, gunakan @supports atau CSS.supports untuk mendeteksi dukungan untuk CSS Scroll Snap. Hindari penggunaan scroll-snap-type yang juga ada dalam spesifikasi yang tidak digunakan lagi.

Deteksi fitur di CSS

@supports (scroll-snap-align: start) {
  article {
    scroll-snap-type: y proximity;
    scroll-padding-top: 15vh;
    overflow-y: scroll;
  }
}

Deteksi fitur di JavaScript

if (CSS.supports('scroll-snap-align: start')) {
  // use css scroll snap
} else {
  // use fallback
}

Jangan berasumsi bahwa API scroll terprogram seperti Element.scrollTo selalu selesai pada offset scroll yang diminta. Snap scroll dapat menyesuaikan offset scroll setelah scroll terprogram selesai. Perhatikan bahwa ini bukan asumsi yang baik bahkan sebelum snap scroll karena scroll mungkin telah terganggu karena alasan lain, tetapi terutama terjadi dengan snap scroll.

Pekerjaan mendatang

Pengalaman scroll adalah fokus dari survei terbaru oleh tim Chrome. Hasil survei mengidentifikasi beberapa area yang memerlukan pekerjaan tambahan untuk mempersempit kesenjangan antara library plugin dan CSS. Pekerjaan mendatang akan berfokus pada scroll-snap, termasuk:

1. Ketersediaan dan kompatibilitas API di seluruh browser.
2. Bekerja pada CSS API baru seperti scroll-start.
3. Kerjakan peristiwa JS baru seperti snapChanged().