Pengantar Poin Gulir Gulir CSS

Itu Modul Snap Scroll CSS adalah standar web yang memberi kita kendali atas bergulir di halaman web sehingga kami dapat membuat pengguna gulir ke bagian halaman tertentu daripada ke sembarang tempat di atasnya.

Bergulir adalah salah satu tindakan yang paling banyak dilakukan di situs web. Browser, selama bertahun-tahun, miliki meningkatkan kinerja pengguliran mereka untuk mencocokkan kekuatan jari lincah pengguna. Dan, pengembang punya menggulir digunakan secara kreatif untuk mencapai pengalaman pengguna yang lebih baik atau out-of-the-box.

Namun, ketika datang ke korelasi antara coding dan scrolling, hanya JavaScript yang tampaknya memiliki kendali atas yang terakhir. Ini begitu untuk jangka waktu yang lama, tetapi dengan pengenalan poin jepretan gulir, CSS mulai mengejar ketinggalan.

Menggulir tanpa menggulirkan poin jepretan

Biasanya, kami tidak menggulir dengan sangat lambat, terutama pada ponsel. Semakin cepat Anda menggulir, semakin sedikit kontrol yang Anda miliki di mana pada layar Anda akan berakhir ketika Anda berhenti menggulir.

Bayangkan Anda sedang menggulir array gambar produk di situs web, atau galeri foto, atau slide online. Yang Anda inginkan dalam aplikasi tersebut adalah lihat seluruh produk, foto, atau slide setiap kali Anda menggulir. Bukan hanya a bagian dari gambar produk, foto, atau slide.

Misalnya, pada demo di bawah ini Anda hanya dapat melihat kapan saja pengguna berhenti menggulir sekitar setengah dari gambar terlihat di bagian bawah layar. Namun, sebagian besar pengguna lebih suka melihat gambar terakhir sepenuhnya.

Menggulir dengan poin gulir jepret

Di sinilah kami membawa masuk CSS scroll snap points. Namanya jelas; itu adalah standar CSS yang memungkinkan kita snap item ke tempatnya saat bergulir.

Ada lima properti CSS yang merupakan standar ini:

1. scroll-snap-type
2. scroll-snap-points-x
3. scroll-snap-points-y
4. scroll-snap-coordinate
5. scroll-snap-destination

Dukungan browser

Sifat-sifat perlu -webkit dan -Nona awalan untuk browser yang relevan. Saat menulis artikel ini, snap scroll CSS tidak didukung di Chrome dan Opera.

Perhatikan bahwa empat properti terakhir kemungkinan akan jatuh oleh agen pengguna dalam waktu dekat. Sebagai gantinya, properti baru, yaitu scroll-snap-align, scroll-snap-margin, dan scroll-snap-padding, mungkin dibuat, sebagaimana didefinisikan dalam spesifikasi ini.

Namun, mereka akan melakukannya memiliki tujuan yang sama sebagai properti sebelumnya. Saat ini, set properti sebelumnya akan berfungsi dengan baik.

Properti

Kamu butuh Tambahkan scroll-snap-type properti ke wadah gulir (elemen wadah yang anak-anaknya meluap saat digulir). Ini menentukan ketatnya aksi snap. Ini dapat mengambil tiga nilai:

1. wajib - ketika gulir selesai, gulir akan jepret pada titik snap yang relevan
2. kedekatan - kurang ketat dari wajib; itu akan tergantung pada penilaian UA apakah elemen akan patah pada titik snap yang diberikan
3. tidak ada - tidak ada gertakan yang dilakukan

Itu scroll-snap-points-x dan scroll-snap-points-y properti milik wadah gulir, terlalu. Mereka merujuk ke titik pada sumbu x dan y di mana titik jepret akan ada. Nilai mereka adalah diberikan oleh ulangi() fungsi. Misalnya, jika Anda ingin menambahkan titik jepret di sepanjang sumbu x pada interval 100px Anda harus menggunakan scroll-snap-points-x: repeat (100px) aturan.

Itu scroll-snap-destination properti juga ditambahkan ke wadah gulir. Saya t mendefinisikan koordinat pada wadah di mana tujuan snap terletak. Di tujuan jepretan ini tempat anak-anak wadah akan masuk ke tempatnya ketika digulir.

Anda dapat menggunakan scroll-snap-coordinate properti dalam hubungannya dengan scroll-snap-destination. Anda perlu menambahkannya ke elemen turunan anak. Saya t mendefinisikan koordinat elemen anak, yang akan menyelaraskan dengan koordinat tujuan wadah gulir mereka ketika pengguna menggulir layar.

Perhatikan bahwa Anda tidak harus menggunakan semua properti sekaligus. Hanya scroll-snap-type adalah wajib. Bersamaan dengan itu, Anda dapat menentukan masing-masing titik jepretan atau menggunakan kombinasi koordinat tujuan.

Contoh kode

Berikut ini contoh cuplikan kode untuk a wadah gulir khas, dengan bergulir ke arah vertikal & beberapa gambar di dalamnya. Ini menghasilkan demo yang dapat Anda temukan di awal posting ini.

 div width: 300px; tinggi: 300px; overflow: otomatis; ... div> img width: 250px; tinggi: 150px; ... 

Sekarang kita tambahkan beberapa snap point ke wadah gulir:

 div width: 300px; overflow: otomatis; scroll-snap-points-y: repeat (150px); scroll-snap-type: wajib;  

Di bawah ini, Anda dapat melihat bagaimana hasilnya dengan CSS snap points ditambahkan. Perhatikan kapan pun gulir berhenti sementara gambar bawah hanya terlihat sebagian, the gambar penuh muncul setelah scrollport tersentak ke titik gertakan di atasnya.