Tatal-margin - Trik CSS

Anonim

scroll-marginadalah 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-marginadalah sifat pilihan untuk elemen scroll-snapping dalam bekas scroll-snapping. Untuk maklumat lebih lanjut mengenai bekas penggulung tatal lihat scroll-snap-typeentri almanak.

Masukkan scroll-margin

scroll-margindigunakan untuk menyesuaikan kawasan snap elemen (kotak yang menentukan di mana elemen itu akan dihubungkan). Menambah scroll-marginberguna ketika anda perlu memberi ruang elemen dari tepi wadah ketika terpasang di tempatnya, tetapi memungkinkan untuk situasi di mana setiap elemen mungkin memerlukan jarak yang sedikit berbeza. Sekiranya semua elemen mempunyai keperluan jarak yang sama, pertimbangkan untuk menggunakan scroll-paddingbekas induk dan bukannya scroll-marginkerana itu mempengaruhi jarak untuk semua elemen di dalam bekas.

Contoh mudah di mana scroll-marginjarak 50px di bahagian atas dan kiri elemen kelihatan seperti ini:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Kawasan merah jambu mewakili scroll-marginelemen ini.

Sintaks

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

Nota penting pada longhands: Chrome (dan mungkin penyemak imbas lain) buat masa ini tidak menyokong format scroll-paddingdan scroll-marginsifat longhand . Gunakan singkatan untuk sokongan penyemak imbas maksimum. Lihat masalah ini di penjejak pepijat kromium untuk maklumat lanjut dan status terkini.

Nilai

scroll-marginmenerima yang berikut panjang nilai, yang ditulis sama margindan hartanah lain di mana nilai boleh ditakrifkan dengan unit ( px, em, vh, dan lain-lain). Lihat Modul Nilai dan Unit W3C untuk maklumat lebih lanjut. Peratusan tidak dapat digunakan untuk scroll-marginsetiap spesifikasi.

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