Tatal tatal - Trik CSS

Anonim

scroll-paddingadalah sebahagian daripada Modul Snap Scroll CSS. Scroll snapping merujuk pada "mengunci" posisi viewport ke elemen tertentu pada halaman ketika window (atau container yang dapat digulir) digulir. Fikirkan bekas penggulung tatal seperti meletakkan magnet di atas elemen yang melekat di bahagian atas ruang pandang dan memaksa halaman berhenti menatal di sana.

scroll-paddingadalah harta pilihan untuk mana-mana bekas penangkap skrol. Bekas tatal tatal ditentukan setiap kali scroll-snap-typeharta benda ditetapkan ke nilai apa pun selainnya none. Untuk maklumat lebih lanjut mengenai bekas penggulung tatal lihat scroll-snap-typeentri almanak.

OK, jadi beralih ke tatal-padding

scroll-paddingdigunakan untuk menyesuaikan kawasan tontonan yang sesuai untuk penampan. Ini berguna jika bekas mempunyai elemen seperti header tetap yang akan mengaburkan elemen di dalam atau jika bekas yang boleh digulir memerlukan sedikit ruang untuk memberi ruang elemen dalaman untuk bernafas setelah mereka "tersentak" ke kedudukannya.

Contoh mudah adalah menggunakan scroll-paddinguntuk membuat beberapa jarak tetap 50pxdi bahagian atas dan kiri bekas:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Kawasan dengan warna merah jambu menunjukkan tatal tatal pada bekas tatal gulung.

Sintaks

/* Shorthand */ scroll-padding: ( | auto )(1,4); /* Longhands */ scroll-padding-top: | auto; scroll-padding-right: | auto; scroll-padding-bottom: | auto; scroll-padding-left: | auto; /* inline-specific and block-specific properties as well */ scroll-padding-block: ( | auto )(1,2); scroll-padding-inline: ( | auto )(1,2);

Catatan penting mengenai longhands: Chrome pada masa ini tidak menyokong format scroll-paddingdan scroll-marginsifat longhand . Gunakan singkatan untuk sokongan penyemak imbas maksimum. Lihat masalah ini pada pelacak pepijat kromium untuk maklumat lebih lanjut dan status semasa.

Nilai

scroll-padding menerima nilai berikut:

  • automembiarkan pelapisan ditentukan oleh penyemak imbas / ejen pengguna. Secara amnya, ini bermaksud nilai 0px, tetapi boleh menjadi tidak sifar jika ejen pengguna memutuskan nilai lain lebih sesuai.
  • ditulis untuk sama paddingdan hartanah lain di mana nilai boleh ditakrifkan dengan unit ( px, em, vh, dan lain-lain) atau sebagai peratusan daripada bekas itu sendiri.

Contohnya

Lihat contoh pena tatal Pen
oleh CSS-Tricks (@ css-tricks) di CodePen.

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
69 68 11 * 79 11

Mudah Alih / Tablet

Android Chrome Android Firefox Android Safari iOS
88 85 81 11.0-11.2

Berkaitan

  • scroll-snap-type
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Sumber

  • Cadangan Calon CSS Scroll Snap W3C
  • Tangkapan Tatal CSS Praktikal
  • Memperkenalkan CSS Scroll Snap Points