Kaydırma-kenar boşluğu - CSS Hileleri

Anonim

scroll-margin, CSS Scroll Snap Modülünün bir parçasıdır. Kaydırarak yapıştırma, pencere (veya kaydırılabilir bir konteyner) kaydırıldığında görünüm penceresinin konumunu sayfadaki belirli öğelere "kilitlemek" anlamına gelir. Görüntü alanının tepesine yapışan ve sayfayı kaydırmayı durdurmaya zorlayan bir öğenin üstüne bir mıknatıs koymak gibi kaydırarak yapıştırılan bir kapsayıcı düşünün.

scroll-marginkaydırarak yapıştırma kapsayıcı içinde kaydırarak yapıştırma öğesi için isteğe bağlı bir özelliktir. Kaydırmalı kaplar hakkında daha fazla bilgi için scroll-snap-typealmanak girişine bakın.

Kaydırma kenar boşluğunu girin

scroll-marginbir elemanın tutturma alanını ayarlamak için kullanılır (elemanın nereye yapıştırılacağını tanımlayan kutu). Ekleme scroll-margin, yerine oturtulduğunda kabın kenarından bir öğe boşluğu vermeniz gerektiğinde yararlıdır, ancak her öğenin biraz farklı aralıklara ihtiyaç duyabileceği durumlarda izin verir. Tüm öğeler aynı boşluk gereksinimlerine sahipse , kap içindeki tüm öğeler için aralığı etkilediği için scroll-paddingbunun yerine üst kapsayıcıda kullanmayı düşünün scroll-margin.

Bir scroll-marginöğenin üstünde ve solunda 50 piksel boşluk bırakılmasına izin verilen basit bir örnek şuna benzer:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Pembe alan scroll-marginbu elementin üzerini temsil eder .

Sözdizimi

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

Uzun ellerle ilgili önemli not: Chrome (ve muhtemelen diğer tarayıcılar) şu anda uzun el biçimi scroll-paddingve scroll-marginözellikleri desteklememektedir. Maksimum tarayıcı desteği için steno kullanın. Daha fazla ayrıntı ve mevcut durum için krom hata izleyicide bu soruna bakın.

Değerler

scroll-marginkabul izlenerek uzunluğu benzer yazılır değer margindeğer üniteleri (tanımlanabilir burada ve diğer özellikleri px, em, vh, vb). Daha fazla bilgi için W3C Değerleri ve Birimleri Modülüne bakın. scroll-marginSpesifikasyona göre yüzdeler kullanılamaz .

Misal


CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem kaydırma dolgusu örneğine bakın.

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom Firefox IE Kenar Safari
69 68 11 * 79 11

Mobil / Tablet

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

İlişkili

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

Kaynaklar

  • CSS Scroll Snap W3C Aday Önerisi
  • Pratik CSS Kaydırma Yapıştırma
  • CSS Kaydırma Ekleme Noktalarına Giriş