Scroll-margin - Trik CSS

Anonim

scroll-marginadalah bagian dari Modul Snap Gulir CSS. Scroll snapping mengacu pada "mengunci" posisi viewport ke elemen tertentu pada halaman saat jendela (atau wadah yang dapat digulir) di-scroll. Bayangkan wadah penggulung gulir seperti meletakkan magnet di atas elemen yang menempel di bagian atas area pandang dan memaksa laman berhenti menggulir di sana.

scroll-marginadalah properti opsional untuk elemen scroll-snapping dalam wadah scroll-snapping. Untuk informasi lebih lanjut tentang scroll-snapping containers, lihat scroll-snap-typeentri almanak.

Masukkan scroll-margin

scroll-margindigunakan untuk menyesuaikan area jepret elemen (kotak yang menentukan di mana elemen akan diikat). Menambahkan scroll-marginberguna saat Anda perlu memberi ruang elemen dari tepi wadah saat dipasang ke tempatnya, tetapi memungkinkan situasi di mana setiap elemen mungkin memerlukan jarak yang sedikit berbeda. Jika semua elemen memiliki persyaratan penspasian yang sama, pertimbangkan untuk menggunakan scroll-paddingpada penampung induk daripada scroll-marginkarena itu mempengaruhi penspasian untuk semua elemen dalam penampung.

Contoh sederhana di mana scroll-marginmemungkinkan untuk jarak 50px di sekitar bagian atas dan kiri elemen terlihat seperti ini:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Area merah muda mewakili scroll-marginpada elemen ini.

Sintaksis

/* 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);

Catatan penting untuk longhands: Chrome (dan mungkin browser lain) saat ini tidak mendukung format scroll-paddingdan scroll-marginproperti longhand. Gunakan singkatan untuk dukungan browser yang maksimal. Lihat masalah ini di pelacak bug chromium untuk detail selengkapnya dan status saat ini.

Nilai

scroll-marginmenerima berikut panjang nilai, yang ditulis mirip dengan margindan properti lainnya di mana nilai dapat didefinisikan dengan unit ( px, em, vh, dll). Lihat Modul Nilai dan Unit W3C untuk informasi lebih lanjut. Persentase tidak dapat digunakan untuk scroll-marginper spesifikasi.

Contoh

Lihat contoh Pen scroll-padding
oleh CSS-Tricks (@ css-trick) di CodePen.

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
69 68 11 * 79 11

Ponsel / Tablet

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

Terkait

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

Sumber daya

  • Rekomendasi Kandidat CSS Scroll Snap W3C
  • Geser Gulir CSS Praktis
  • Memperkenalkan Poin Snap Gulir CSS