Snap tatal CSS meningkatkan pengalaman menatal melalui kesan penjerapan. Senario biasa termasuk bar navigasi menatal mendatar, menatal menegak, dan penjerapan tempatan dalam susun atur pelbagai lajur. Untuk menatal mendatar, anda perlu menetapkan bekas untuk susun atur flex dan menggunakan scroll-snap-align: mula; Untuk menatal menegak, anda boleh menyatukan ketinggian halaman dan menggabungkan tatal-snap-jenis: y mandatori; Penjerapan tempatan sesuai untuk senarai kad, dan tatal-snap-align: pusat biasanya digunakan untuk mencapai gelongsor pusat. Nota termasuk isu keserasian, sokongan yang tidak lengkap untuk beberapa pelayar, dan konflik dengan kedudukan tetap atau transformasi. Adalah disyorkan untuk menguji prestasi peranti dan pelayar yang berbeza semasa pembangunan.

Mahu membuat laman web tatal ke lancar dan lebih berirama? Ciri snap tatal CSS adalah pilihan yang baik. Ia membolehkan halaman anda secara automatik "menghisap" ke lokasi tertentu semasa menatal, memberikan pengguna perasaan yang dibimbing untuk melayari. Jika digunakan dengan baik, ia bukan sahaja akan meningkatkan pengalaman, tetapi juga meningkatkan kebolehbacaan dan kepekatan kandungan.

Mari kita lihat beberapa senario penggunaan biasa dan kaedah penulisan dalam aplikasi praktikal untuk membantu anda dengan cepat memulakan dengan CSS Scroll Snap.

Tatal bar navigasi secara mendatar

Jika anda akan melakukan paparan kandungan menatal secara mendatar, seperti galeri gambar atau karusel produk, snap tatal adalah sempurna.

 .container {
  tatal-snap-jenis: x mandatori;
  limpahan-X: tatal;
  Paparan: Flex;
}

.item {
  SCROLL-SNAP-ALIGN: Mula;
  Min-lebar: 100%;
}

Selepas tetapan ini, setiap tatal secara automatik akan menyelaraskan kedudukan permulaan setiap .item , secara visual seperti menghidupkan halaman mengikut halaman.
Beberapa mata yang perlu diperhatikan:

• Bekas mesti mempunyai lebar yang jelas, atau dimensi kanak-kanak mesti dikawal oleh min-width .
• Gunakan susun atur flex atau grid untuk memastikan unsur -unsur kanak -kanak disusun dengan betul.
• Jika anda mahu bar skrol tersembunyi tetapi masih slaid, anda boleh menggunakan overflow: hidden dengan bekas tatal dalaman.

Menatal paginal

Sama seperti kesan PPT, leret ke atas dan ke bawah dan lompat terus ke skrin seterusnya. Amalan ini sering dipaparkan pada halaman pengenalan, laman web halaman tunggal, atau peranti mudah alih.

 Bahagian {
  SCROLL-SNAP-ALIGN: Mula;
}

.scroll-container {
  tatal-snap-jenis: y mandatori;
  limpahan-y: tatal;
  Ketinggian: 100VH;
}

Setiap section menjadi perhentian bergulir. Terdapat beberapa petua untuk penyelesaian ini:

• Ketinggian halaman adalah yang terbaik bersatu, jika tidak, mudah untuk "tidak dapat menyerap".
• Navigasi yang menonjolkan atau petunjuk kemajuan boleh dilaksanakan dalam kombinasi dengan JS.
• Perhatikan penskalaan bar alamat penyemak imbas mempengaruhi pengiraan ketinggian apabila ujian di terminal mudah alih.

Penjerapan tempatan dalam susun atur pelbagai lajur

Kadang -kadang kita tidak perlu menatal keseluruhan halaman, tetapi sebaliknya berharap kawasan tempatan menyokong penjerapan menatal, seperti senarai kad atau menu bar sisi.

Kaedah pelaksanaan juga sangat mudah:

 .card-list {
  tatal-snap-jenis: x mandatori;
  Overflow-X: Auto;
  ruang putih: nowrap;
}

.card {
  scroll-snap-align: pusat;
  paparan: blok sebaris;
}

Di sini scroll-snap-align: center membolehkan kad dipaparkan di tengah, yang lebih semula jadi daripada start . Kaedah penulisan ini amat sesuai untuk komponen gelongsor mendatar di bawah skrin kecil terminal mudah alih.

Anda juga boleh menambah animasi peralihan:

 .card {
  scroll-snap-align: pusat;
  Peralihan: Transformasi 0.2s mudah;
}

Walaupun tidak semua pelayar menyokong animasi, pengalaman lebih baik pada peranti yang disokong.

Nota dan keserasian

Walaupun snap tatal adalah baik, terdapat beberapa butiran untuk memberi perhatian kepada:

• Tidak semua penyemak imbas sepenuhnya menyokongnya, terutamanya versi lama Safari dan IE.
• Pada beberapa pelayar mudah alih (seperti pelayar terbina dalam WeChat), penjerapan yang tidak sensitif mungkin berlaku.
• Jika anda menggunakan position: fixed atau transform pada halaman, ia boleh menjejaskan tingkah laku penjerapan.

Adalah disyorkan untuk melakukan lebih banyak ujian semasa pembangunan, terutamanya untuk melihat jika menatal adalah lancar di bawah peranti dan pelayar yang berbeza.

Pada dasarnya itu, snap tatal tidak rumit, tetapi mudah untuk mengabaikan butirannya. Penggunaan yang munasabah boleh mengambil interaksi web anda ke tahap yang lebih tinggi.

Atas ialah kandungan terperinci Membuat pengalaman menatal berpandu dengan snap tatal CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!