scroll-padding
, 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-padding
herhangi bir kaydırmalı kap için isteğe bağlı bir özelliktir. Kaydırmalı kaplar, scroll-snap-type
özellik dışında herhangi bir değere ayarlandığında tanımlanır none
. Kaydırmalı kaplar hakkında daha fazla bilgi için scroll-snap-type
almanak girişine bakın.
Tamam, kaydırma dolgusuna geçiyorum
scroll-padding
yapıştırma kutusunun optimum görüntüleme bölgesini ayarlamak için kullanılır. Bu, kabın içindeki öğeleri gizleyen sabit bir başlık gibi öğelere sahipse veya kaydırılabilir konteyner, yerine "oturtulduktan" sonra iç öğelere nefes alması için alan sağlamak için biraz alana ihtiyaç duyuyorsa yararlıdır.
Basit bir örnek , kabın üstünde ve solunda scroll-padding
bazı sabit aralıklar oluşturmak için kullanılabilir 50px
:
.scroll-container ( scroll-padding: 50px 0 0 50px; )
Sözdizimi
/* 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);
Uzun ellerle ilgili önemli not: Chrome şu anda uzun el biçimini scroll-padding
ve scroll-margin
özelliklerini 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-padding
aşağıdaki değerleri kabul eder:
auto
dolguyu tarayıcı / kullanıcı aracısı tarafından belirlenecek şekilde bırakır. Genellikle bu, 0px değeri anlamına gelir, ancak kullanıcı aracısı başka bir değerin daha uygun olduğuna karar verirse sıfır olmayabilir.Benzer yazılır
padding
değer birimleri ile tanımlanabilir ve diğer özellikleri (px
,em
,vh
vs.) ya da kabın kendisinin bir yüzdesi olarak verilmiştir.
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ş