Pengenalan kepada Titik Snap Skrol CSS

The Modul Snap Tatal CSS adalah piawaian web yang memberikan kita kawalan menatal pada halaman web supaya kita boleh membuat pengguna tatal ke bahagian tertentu halaman dan bukan hanya di mana sahaja di atasnya.

Bergulir adalah salah satu tindakan yang paling banyak dilakukan di laman web. Pelayar, selama bertahun-tahun, telah meningkatkan prestasi menatal mereka untuk memadankan kekuatan jari lincah pengguna. Dan, pemaju mempunyai menggunakan menatal secara kreatif untuk mencapai pengalaman pengguna yang lebih baik atau yang tidak dapat dikesan.

Walau bagaimanapun, apabila ia berkaitan dengan korelasi antara pengekodan dan menatal, hanya JavaScript seolah-olah mempunyai jumlah kawalan ke atas yang terakhir. Ini adalah untuk jangka masa yang panjang, tetapi dengan pengenalan titik snap tatal, CSS mula mengejar.

Menatal tanpa titik snap tatal

Biasanya, kami tidak tatal dengan lambat, terutamanya pada telefon. Semakin cepat anda tatal, kurang kawalan yang anda miliki di mana pada skrin anda akan berakhir apabila anda berhenti menatal.

Bayangkan anda menatal melalui pelbagai imej produk di laman web, atau galeri foto, atau slaid dalam talian. Apa yang anda lebih suka dalam aplikasi sedemikian adalah untuk lihat keseluruhan produk, foto, atau slaid setiap kali anda menatal. Bukan sahaja a bahagian imej, foto, atau slaid produk.

Sebagai contoh, pada demo di bawah ini anda boleh melihat apabila pengguna berhenti menatal, sahaja kira-kira separuh imej kelihatan di bahagian bawah skrin. Walau bagaimanapun, kebanyakan pengguna lebih suka melihat imej terakhir sepenuhnya.

Menatal dengan titik snap tatal

Di sinilah kita masuk Titik snap CSS tatal. Nama itu jelas-jelas; ia adalah standard CSS yang membolehkan kami snap item ke tempat semasa menatal.

Disana ada lima sifat CSS yang membentuk standard ini:

1. tatal-snap-jenis
2. tatal-snap-points-x
3. tatal-snap-points-y
4. koordinat skrol-snap
5. tatal-snap-destinasi

Sokongan penyemak imbas

Sifat-sifatnya keperluan -webkit dan -Cik awalan untuk pelayar yang berkaitan. Sebagai penulisan artikel ini, snap tatal CSS tidak disokong dalam Chrome dan Opera.

Perhatikan bahawa empat hartanah terakhir mungkin akan dijatuhkan oleh ejen pengguna dalam masa terdekat. Sebaliknya, hartanah baru, iaitu tatal-snap-align, margin-scroll-snap, dan tatal-snap-padding, mungkin dibuat, seperti yang ditakrifkan dalam spesifikasi ini.

Walau bagaimanapun, mereka akan mempunyai tujuan yang serupa sebagai harta bekas. Pada masa ini, bekas set hartanah akan berfungsi dengan baik.

Hartanah

Anda perlu tambahkan tatal-snap-jenis harta ke bekas skrol (elemen kontena yang kanak-kanaknya meluap ketika ia ditatal). Ia menentukan ketat tindakan snap. Ia boleh mengambil tiga nilai:

1. wajib - apabila menatal selesai, penggiliran akan snap pada titik snap yang berkaitan
2. jarak dekat - kurang ketat daripada wajib; ia akan bergantung kepada penghakiman UA sama ada elemen itu akan terkena pada titik snap yang diberikan
3. tiada - tiada snap dilakukan

The tatal-snap-points-x dan tatal-snap-points-y hartanah tergolong dalam bekas skrol, juga. Mereka merujuk kepada titik pada paksi x dan y di mana titik snap akan wujud. Nilai mereka adalah yang diberikan oleh ulang () fungsi. Sebagai contoh, jika anda ingin menambah titik snap di sepanjang paksi-x pada selang waktu 100px anda perlu menggunakannya skrol-snap-points-x: repeat (100px) peraturan.

The tatal-snap-destinasi harta juga ditambah pada bekas skrol. Ia mentakrifkan koordinat pada bekas di mana destinasi snap terletak. Ia berada di destinasi snap ini di mana anak-anak bekas akan terperangkap apabila ditatal.

Anda boleh menggunakannya koordinat skrol-snap harta bersama dengan tatal-snap-destinasi. Anda perlu menambahnya kepada elemen kanak-kanak bekas itu. Ia mentakrifkan koordinat elemen kanak-kanak, yang akan selaras dengan koordinat destinasi bekas skrol mereka apabila pengguna menatal skrin.

Perhatikan anda tidak perlu menggunakan semua sifat sekaligus. Hanya tatal-snap-jenis adalah wajib. Seiring dengan itu, anda boleh menentukan titik snap individu atau menggunakan kombinasi koordinat destinasi.

Contoh kod

Berikut ialah coretan kod contoh untuk a bekas skrol tipikal, dengan menatal arah menegak & beberapa imej di dalam. Ia menghasilkan demo yang anda dapati pada permulaan post ini.

 div width: 300px; ketinggian: 300px; overflow: auto; ... div> img width: 250px; ketinggian: 150px; ... 

Sekarang kita tambah beberapa titik snap ke dalam bekas skrol:

 div width: 300px; limpahan: auto; tatal-snap-points-y: ulangi (150px); tatal-snap-jenis: wajib;  

Di bawah, anda boleh melihat bagaimana output kelihatan seperti dengan Tambah titik snap CSS. Perhatikan apabila penggiliran berhenti sementara imej bawah hanya kelihatan sebahagian, iaitu imej penuh muncul selepas scrollport terperosok ke titik gumpalan di atasnya.