Scroll-padding - Trik CSS

Anonim

scroll-paddingadalah 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-paddingadalah properti opsional untuk setiap penampung gulir gulir. Kontainer scroll-snapping ditentukan setiap kali scroll-snap-typeproperti diatur ke nilai apa pun selain itu none. Untuk informasi lebih lanjut tentang scroll-snapping containers, lihat scroll-snap-typeentri almanak.

Oke, jadi lanjutkan ke scroll-padding

scroll-paddingdigunakan untuk mengatur wilayah tampilan optimal wadah snapping. Ini berguna jika penampung memiliki elemen seperti tajuk tetap yang akan mengaburkan elemen di dalamnya atau jika penampung yang dapat digulir membutuhkan beberapa ruang untuk memberikan ruang elemen interior untuk bernafas setelah mereka "dipasang" ke posisinya.

Contoh sederhana akan digunakan scroll-paddinguntuk membuat beberapa spasi tetap 50pxdi bagian atas dan kiri penampung:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Area dalam warna pink menunjukkan scroll-padding pada wadah scroll-snapping.

Sintaksis

/* 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 tentang tangan panjang: Chrome saat ini tidak mendukung format scroll-paddingdan scroll-marginproperti tangan panjang . Gunakan singkatan untuk dukungan browser yang maksimal. Lihat masalah ini di pelacak bug chromium untuk detail selengkapnya dan status saat ini.

Nilai

scroll-padding menerima nilai-nilai berikut:

  • automembiarkan padding ditentukan oleh browser / agen pengguna. Secara umum, ini berarti nilai 0px, tetapi bisa bukan nol jika agen pengguna memutuskan nilai lain yang lebih sesuai.
  • ditulis dengan serupa paddingdan properti lainnya di mana nilai dapat didefinisikan dengan unit ( px, em, vh, dll) atau sebagai persentase dari wadah itu sendiri.

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