Pelaksanaan snap tatal CSS memerlukan perhatian terhadap struktur dan tetapan harta. Pertama, buat bekas scrollable dan tetapkan tatal-snap-jenis; kedua tambah tatal-snap-align untuk unsur-unsur kanak-kanak; 1. Bekas perlu menetapkan limpahan dan tatal-snap-jenis, seperti .container {overflow-x: auto; tatal-snap-jenis: x mandatori; }; 2. Unsur-unsur kanak-kanak perlu menetapkan scroll-snap-align, seperti .item {scroll-snap-align: start; }; Arah tatal ditentukan oleh paksi (x atau y), dan jenis penjerapan dibahagikan kepada mandatori (penjajaran paksa) dan jarak (diselaraskan apabila dekat); Apabila menggunakannya, unsur-unsur kanak-kanak perlu disatukan untuk mengelakkan padding, dan margin dan tatal-melangkah masuk dengan munasabah untuk bekerja dengan susun atur, seperti senarai kad mendatar, anda boleh mengira lebar melalui susun atur flex bersempena dengan CALC untuk memastikan penjajaran yang betul.

CSS Scroll Snap adalah fungsi yang sangat praktikal, terutamanya dalam senario di mana menatal mendatar, paparan penomboran atau kawalan tepat kedudukan tatal. Ia membolehkan halaman untuk "menghisap" ke lokasi tertentu apabila menatal, meningkatkan pengalaman pengguna. Ia tidak rumit untuk dilaksanakan, tetapi terdapat beberapa perkara utama yang memerlukan perhatian.

Struktur asas dan tetapan harta tanah

Untuk menggunakan snap tatal, anda mesti terlebih dahulu mempunyai bekas yang boleh ditatal. Biasanya elemen dengan overflow: auto atau overflow: scroll . Kemudian tambahkan atribut scroll-snap-type ke bekas ini untuk memberitahu penyemak imbas bahawa tingkah laku menatal bekas ini mempunyai kesan penjerapan.

Contohnya:

 .container {
  Overflow-X: Auto;
  tatal-snap-jenis: x mandatori;
}

Kod di atas bermaksud: bekas ini boleh ditatal secara mendatar, dan ia mesti diserap ke unsur -unsur kanak -kanak semasa menatal.

Setiap elemen kanak-kanak (iaitu blok yang anda mahu berhenti) juga perlu menambah atribut scroll-snap-align , seperti:

 .item {
  SCROLL-SNAP-ALIGN: Mula;
}

Dengan cara ini penyemak imbas tahu bahawa elemen itu harus diselaraskan dengan kedudukan permulaan bekas.

Arah rolling dan pilihan jenis penjerapan

Nilai scroll-snap-type terdiri daripada dua bahagian: paksi (x atau y) dan jenis (mandatori atau kedekatan).

• Axial : Tentukan sama ada menatal mendatar atau menegak berkuatkuasa.
• Jenis :
  • mandatory : Selagi pengguna berhenti menatal, titik penjerapan terdekat akan dipaksa untuk menyelaraskan.
  • proximity : Ia hanya akan diserap secara automatik apabila tindakan rolling lebih perlahan atau dekat dengan titik penjerapan, jika tidak, ia akan menjadi seperti menatal biasa.

Sebagai contoh, jika anda membuat laman web skrol menegak skrin penuh, gunakan scroll-snap-type: y mandatory; untuk memastikan setiap sapu akan berhenti di bahagian lengkap.

Jika ia adalah kad menatal mendatar yang memberi tumpuan kepada pengalaman gelongsor cepat, ia mungkin lebih sesuai untuk menggunakan proximity untuk membuat menatal lebih semula jadi.

Nota mengenai susunan dan gaya elemen kanak -kanak

Walaupun snap tatal seolah -olah hanya perlu menambah beberapa atribut untuk digunakan, anda masih akan menghadapi situasi "pelik" dalam pembangunan sebenar. Sebagai contoh, kadang -kadang rolling tidak dapat dilakukan pada kedudukan yang diharapkan, atau penjerapan itu salah.

Ini sering disebabkan oleh saiz, jarak, atau padding unsur -unsur kanak -kanak yang tidak konsisten.

Beberapa cadangan:

• Jangan tambahkan padding ke bekas pada kehendak, kerana ia boleh menjejaskan pengiraan penjerapan dengan mudah.
• Lebar/ketinggian unsur -unsur kanak -kanak adalah seragam yang mungkin, terutamanya apabila menatal secara mendatar, lebih baik untuk menentukan dengan jelas .item { width: 100%; } atau nilai tetap.
• Jika margin digunakan untuk memisahkan unsur-unsur kanak-kanak, pertimbangkan untuk mengimbangi bekas dengan scroll-padding .
• Apabila anda mengatur unsur -unsur kanak -kanak dengan Flexbox atau grid, sedar bahawa mereka mungkin mengubah tingkah laku menatal.

Sebagai contoh, jika anda mempunyai senarai kad yang menatal secara mendatar dengan selang 20px antara setiap kad, maka anda boleh mengendalikannya seperti ini:

 .container {
  Paparan: Flex;
  Overflow-X: Auto;
  tatal-snap-jenis: x mandatori;
  Tatal-padding: 0 20px;
}

.item {
  Flex: 0 0 Calc (100% - 20px);
  margin-kanan: 20px;
  SCROLL-SNAP-ALIGN: Mula;
}

Ini mengelakkan offset penjajaran akibat margin.

Pada dasarnya itu sahaja. Kunci untuk melaksanakan tingkah laku snap CSS adalah struktur yang jelas, gaya bersatu, dan penggunaan atribut yang berkaitan. Ia kelihatan mudah, tetapi mudah untuk menimbulkan masalah jika anda tidak memberi perhatian.

Atas ialah kandungan terperinci Melaksanakan tingkah laku snap tatal CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!